[]
DEMOS DOC DESIGNER API
DOWNLOAD
(Showing Draft Content)

투명도를 활용한 차트 색상 설정

SpreadJS는 차트 영역 배경색, 차트 데이터 레이블, 차트 축, 계열 등 다양한 차트 요소를 구성할 때 투명도를 설정할 수 있는 기능을 제공합니다. 이로써 사용자는 차트를 보다 자유롭게 사용자 정의할 수 있습니다.

아래 이미지는 네 개 국가의 매출 데이터를 나타내는 차트로, 다양한 차트 요소에 투명도가 설정되어 사용자 지정된 예시를 보여줍니다.



아래 코드 샘플은 차트 색상에 투명도를 설정하는 방법을 보여줍니다.

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);
// 열형 묶은 세로 막대형 차트를 추가합니다.
  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();
};