透明的图表

SpreadJS在配置不同的图表元素时提供了对透明度的支持，以便允许用户自定义图表区域的背景色，图表数据标签，图表轴和系列等。

下图显示了描述四个不同国家/地区的销售数据的图表，其中已自定义了不同的图表元素以设置透明度。

代码

The following example code shows how to set chart color with transparency.

window.onload = function ()
{
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
sheet = spread.getActiveSheet();
sheet.suspendPaint();
var dataArray = 
[
  ["", 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep',
    'Oct', 'Nov', 'Dec'],

  ["Tokyo", 49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5,
     216.4, 194.1, 95.6, 54.4],

  ["New York", 83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3,
    91.2, 83.5, 106.6, 92.3],
   
  ["London", 48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6,
     52.4, 65.2, 59.3, 51.2],
  
  ["Berlin", 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: "Sales Data",
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();
};