チャート色の透過性の設定

Spread.Sheetsでは、さまざまなチャート要素の設定において、透過性を使用できます。透過性を使用して、チャートエリアの背景色、チャートのデータラベル、軸、系列などをカスタマイズできます。

次の図は、4つの国別の売上高を示すチャートです。いくつかのチャート要素が、透過性を使用するようにカスタマイズされています。

chart_transparency

コードの使用

次のサンプルコードは、チャートの色に透過性を設定します。

window.onload = function ()
{
  var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
  sheet = spread.getActiveSheet();
  sheet.suspendPaint();  var dataArray = 
    [
      ["", '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
      ["東京", 49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
      ["ニューヨーク", 83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3],
      ["ロンドン", 48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2],
      ["ベルリン", 42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]
      ];
        sheet.setArray(0, 0, dataArray); // 集合縦棒チャート（columnClustered）を追加します。 
 chart_columnClustered = sheet.charts.add ('chart_columnClustered',GC.Spread.Sheets.Charts.ChartType.columnClustered,    300, 180, 600, 400, "A1:M5"); // チャートタイトルに透過性を設定します。
 chart_columnClustered.title
 ({
    text: "販売データ",
    color: "blue",
    transparency: 0.5
  });  // チャートの凡例の背景色と枠線に透過性を設定します。
chart_columnClustered.legend
   ({
       backColor: "red",
       backColorTransparency: 0.5,
       borderStyle: 
       {
         color: "green",
         width: 5,
         transparency: 0.7
       }
    });   // チャートエリアの背景色に透過性を設定します。
chart_columnClustered.chartArea
     ({
                backColor: "red",
                backColorTransparency: 0.9,
                color: "black",
                transparency: 0.6
     });        // チャートのデータラベルに透過性を設定します。
chart_columnClustered.dataLabels
     ({
                showValue: true,
                color: "red",
                transparency: 0.6
      });// チャートの軸に透過性を設定します。            
chart_columnClustered.axes
      ({
                primaryCategory:
          {
                    lineStyle:
             {
                        color: "blue",
                        width: 5,
                        transparency: 0.8
              },
                    style:
              {
                        color: "black",
                        transparency: 0.7
               },
                    title:
               {
                        color: "dark",
                        transparency: 0.4
                }
             }
        });// チャートの系列に透過性を設定します。
var series1 = chart_columnClustered.series().get(0);
series1.backColor = "red";
series1.backColorTransparency = 0.5;
series1.border = 
      {
            color: "blue",
            width: 4,
            transparency: 0.6
       }
            chart_columnClustered.series().set(0, series1);            sheet.resumePaint();
};