SpreadJS 차트의 향상된 기능
페이지 정보
작성자 GrapeCity
작성일 2021-01-27 11:25 조회 3,219회
댓글 0건
본문
관련링크
GrapeCity의
새로운 깔때기형 차트
GrapeCity의 SpreadJS v14 차트 유형에는 깔때기형 차트가 포함되어 있습니다. 깔때기형 차트는 프로세스의 여러 단계에 걸쳐 값을 보여줍니다.
이러한 차트에서는 매출을 표시하는 경우가 많으며 영업 프로세스의 각 단계에서 잠재적 수익을 보여줍니다.
Example:
아래 코드를 사용해 데이터를 추가하고 깔때기형 차트 유형을 만들 수 있습니다.
var dataArray = [ ["Stage", "Amount"], ["Prospects", 500], ["Qualified prospects", 425], ["Need analysis", 200], ["Price quotes", 150], ["Negotiations", 100], ["Closed sales", 90], ]; sheet.setArray(0, 0, dataArray); var chart = sheet.charts.add( "chart1", GC.Spread.Sheets.Charts.ChartType.funnel, 2, 85, 800, 350, "A1:B7" );
향상된 새 차트 기능
SpreadJS v14에는 다음과 같은 향상된 새 차트 기능이 포함되어 있습니다.
차트에 배경색으로 패턴 채우기
줄 바꿈을 지원하는 차트 제목
데이터 레이블 구분 기호 옵션
가로 또는 세로 막대형 차트의 gapWidth 및 overlap 속성 설정
도넛형 차트의 구멍 크기 조정
차트 축 교차
차트에 배경색으로 패턴 채우기
SpreadJS v14에서는 차트 요소의 배경색에 대해 패턴 채우기를 지원합니다. 패턴 채우기는 차트가 흑백 프린터로 인쇄되는 경우 유용합니다. SpreadJS v14에는 48가지 기본 제공 채우기 유형이 포함되어 있어 이 중에서 선택할 수 있습니다.
패턴 채우기 선 또는 점의 전경색과 패턴 채우기의 배경색을 지정하여 패턴 채우기 유형을 사용자 정의합니다.
제목, 범례, 차트 계열 등 패턴 채우기로 차트의 모든 영역을 설정할 수 있습니다. 예를 들어 다음 코드 조각에서는 차트 영역의 배경색을 점이 있는 백분율 패턴 채우기 유형(빨간색 전경과 노란색 배경)으로 설정합니다.
var chartArea = chart.chartArea();
chartArea.backColor = {
type: GC.Spread.Sheets.Charts.PatternType.dottedPercent20,
foregroundColor: "yellow",
backgroundColor: "red",
};
chart.chartArea(chartArea);
차트 제목에서 줄 바꿈을 지원
SpreadJS v14에서는 "\n" 문자를 사용해 축 레이블 및 제목에서 줄 바꿈을 지원합니다. 공백 문자도 줄 바꿈으로 사용할 수 있습니다.
차트 크기가 줄어들면 가로 축 텍스트가 자동으로 줄 바꿈됩니다. 이를 통해 사용자는 더 긴 차트 제목을 더 깔끔하게 표시할 수 있습니다. SpreadJS v14는 이 두 가지 경우를 모두 지원합니다.
"\n"을 사용하는 여러 줄
차트 크기가 줄어들 때의 공백 문자
데이터 레이블 구분 기호 옵션
SpreadJS v14에서 사용자는 사용자 정의 데이터 레이블 구분 기호를 만들 수 있습니다. 이 구분 기호 옵션을 통해 공백, 쉼표, 세미콜론 또는 마침표와 같은 문자를 지정하여 데이터 레이블이 다음 줄 어느 곳에서부터 표시되어야 하는지 나타낼 수 있습니다.
chart.dataLabels()를 사용해 차트의 각 계열에 대해 데이터 레이블을 가져오거나 설정할 수 있습니다.
다음 코드 조각에는 ","(쉼표)로 설정된 구분 기호가 표시되어 있습니다.
var series = chart.series().get(1);
series.dataLabels= {
showValue : false,
showSeriesName: true,
showCategoryName: false,
showPercentage:false,
separator: ",",
position: GC.Spread.Sheets.Charts.DataLabelPosition.Center,
format: "#,##0;-#,##0",
color: "white",
backColor: "red",
borderColor: "blue",
borderWidth: 2
};
chart.series().set(1, series);가로 또는 세로 막대형 차트의 gapWidth 및 Overlap 속성 설정
SpreadJS v14에서는 사용자가 가로 및 세로 막대형 차트의 간격 너비 및 겹치기를 조정할 수 있습니다. 이 기능을 사용하려면 차트 계열의 gapWidth 및 overlap 속성을 설정하십시오. gapWidth 속성에서는 막대 또는 열 클러스터 사이의 공백을 막대 또는 열 너비의 백분율로 설정합니다.
간격 너비 값은 0~5이어야 합니다. overlap 속성에서는 가로 및 세로 막대형 차트의 위치를 설정합니다. 이 값을 -1에서 1 사이로 설정합니다. SpreadJS 디자이너에서 차트 데이터를 두 번 클릭하면 데이터 서식 지정 측면 패널이 열리고 여기에서 두 속성을 설정하십시오.
계열 옵션에서 계열 겹치기와 간격 너비를 입력하십시오.
사용자는 SpreadJS API 코드를 사용해 이러한 속성을 설정할 수도 있습니다.
var series1 = chart.series().get(0); series1.gapWidth = 2; series1.overlap= 0.6; chart.series().set(0, series1);
이 새 기능을 사용해 다음 단계에 따라 폭포 차트를 만듭니다.
1. 데이터 추가 및 식 설정:
var sheet = spread.getActiveSheet();
// 1.) Add data and set formulas
// 1.1) Array with data
sheet.setArray(0, 0, [
[null, "Base", "End", "Down", "Up", "Start", "Net Cash Flow"],
["Start", 2000, null, null, null, null, null],
["Jan", null, null, null, null, null, 5000],
["Feb", null, null, null, null, null, -503],
["Mar", null, null, null, null, null, -1670],
["Apr", null, null, null, null, null, 4802],
["May", null, null, null, null, null, -1198],
["Jun", null, null, null, null, null, -3526],
["Jul", null, null, null, null, null, 1826],
["Aug", null, null, null, null, null, -2284],
["Sep", null, null, null, null, null, 3250],
["Oct", null, null, null, null, null, -1780],
["Nov", null, null, null, null, null, 2667],
["Dec", null, null, null, null, null, 1500],
["End", null, null, null, null, null, 2475],
]);
// 1.2) Set formulas
// B4:B15
sheet.setFormula(3, 1, "=SUM(B3,E3:F3)-D4");
sheet.setFormula(4, 1, "=SUM(B4,E4:F4)-D5");
sheet.setFormula(5, 1, "=SUM(B5,E5:F5)-D6");
sheet.setFormula(6, 1, "=SUM(B6,E6:F6)-D7");
sheet.setFormula(7, 1, "=SUM(B7,E7:F7)-D8");
sheet.setFormula(8, 1, "=SUM(B8,E8:F8)-D9");
sheet.setFormula(9, 1, "=SUM(B9,E9:F9)-D10");
sheet.setFormula(10, 1, "=SUM(B10,E10:F10)-D11");
sheet.setFormula(11, 1, "=SUM(B11,E11:F11)-D12");
sheet.setFormula(12, 1, "=SUM(B12,E12:F12)-D13");
sheet.setFormula(13, 1, "=SUM(B13,E13:F13)-D14");
sheet.setFormula(14, 1, "=SUM(B14,E14:F14)-D15");
// D4:D15
sheet.setFormula(3, 3, " =-MIN(G4,0)");
sheet.setFormula(4, 3, " =-MIN(G5,0)");
sheet.setFormula(5, 3, " =-MIN(G6,0)");
sheet.setFormula(6, 3, " =-MIN(G7,0)");
sheet.setFormula(7, 3, " =-MIN(G8,0)");
sheet.setFormula(8, 3, " =-MIN(G9,0)");
sheet.setFormula(9, 3, " =-MIN(G10,0)");
sheet.setFormula(10, 3, " =-MIN(G11,0)");
sheet.setFormula(12, 3, " =-MIN(G12,0)");
sheet.setFormula(13, 3, " =-MIN(G14,0)");
sheet.setFormula(14, 3, " =-MIN(G15,0)");
// E4:E15
sheet.setFormula(3, 4, "=MAX(G4,0)");
sheet.setFormula(4, 4, "=MAX(G5,0)");
sheet.setFormula(5, 4, "=MAX(G6,0)");
sheet.setFormula(6, 4, "=MAX(G7,0)");
sheet.setFormula(7, 4, "=MAX(G8,0)");
sheet.setFormula(8, 4, "=MAX(G9,0)");
sheet.setFormula(9, 4, "=MAX(G10,0)");
sheet.setFormula(10, 4, "=MAX(G11,0)");
sheet.setFormula(11, 4, "=MAX(G12,0)");
sheet.setFormula(12, 4, "=MAX(G13,0)");
sheet.setFormula(13, 4, "=MAX(G14,0)");
sheet.setFormula(14, 4, "=MAX(G15,0)");
// F3
sheet.setFormula(2, 5, "=G3");
// C16
sheet.setFormula(15, 2, "=SUM(B15,E15:F15)-D16"); 2. A1:F17의 데이터로 누적 세로 막대형 차트 만들기
// 2.) Create a Stacked Column chart from data in A1:F17
var columnStacked = sheet.charts.add(
"Chart1",
GC.Spread.Sheets.Charts.ChartType.columnStacked,
450,
85,
650,
450,
"A1:F17"); 3. 각 계열 가져오기
// 3.) Get each series
var seriesCollection = columnStacked.series();
var series0 = seriesCollection.get(0);
var series1 = seriesCollection.get(1);
var series2 = seriesCollection.get(2);
var series3 = seriesCollection.get(3);
var series4 = seriesCollection.get(4); 4. 간격 너비 설정
// 4.) Set Gap Width to 1
series0.gapWidth = 1;
series1.gapWidth = 1;
series2.gapWidth = 1;
series3.gapWidth = 1;
series4.gapWidth = 1; 5. 각 계열의 서식 지정
// 5.1) Format Base series - no fill, no border, so it isn't visible in the chart
series0.backColor = null;
series0.fillColorTransparency = 100;
seriesCollection.set(0, series0);
// 5.2) Format Start series - gray fill color
series1.backColor = "Gray";
seriesCollection.set(1, series1);
// 5.3) Format Down series - red fill color
series2.backColor = "Red";
seriesCollection.set(2, series2);
// 5.4) Format Up series - green fill color
series3.backColor = "Green";
seriesCollection.set(3, series3);
// 5.5) Format End series - gray fill color
series4.backColor = "Gray";
seriesCollection.set(4, series4); 6. 범례 제거 및 차트 제목 설정
// 6.) Remove the legend and set chart title
var legend = columnStacked.legend();
legend.visible =false;
columnStacked.legend(legend);
var title = columnStacked.title();
title.text = "Waterfall Chart";
title.fontFamily = "Calibri Light";
columnStacked.title(title); 결과로 생성되는 폭포 차트는 아래와 같이 보실 수 있습니다.
도넛형 차트 구멍 크기 사용자 정의
SpreadJS v14의 도넛형 차트 유형을 통해 사용자는 구멍 크기를 조정할 수 있습니다. 구멍의 크기와 조각의 너비를 확대하거나 축소할 수 있습니다.
더 넓은 조각을 표시하여 긴 계열이나 범주 이름 또는 이름, 값, 백분율의 조합을 포함하는 데이터 레이블을 더 잘 수용할 수 있습니다. 이 기능을 사용하려면 차트 계열의 doughnutHoleSize 값을 설정하십시오. 이 값은 0에서 0.9 사이여야 합니다.
var series1 = chart.series().get(0); series1.doughnutHoleSize = 0.7; chart.series().set(0, series1);
예를 들어 이것은 도넛형 구멍 크기를 0.3으로 설정하고, 이어서 0.7로 설정하는 것 사이의 차이를 보여 줍니다.
차트 축 교차
SpreadJS v14 차트에서는 이제 차트 축 교차 조정을 지원합니다. 이 기능을 통해 사용자는 x축/y축을 특정 교차점 또는 최대/최소 축 값으로 이동할 수 있습니다.
GC.Spread.Sheets.Charts.AxisCrossPoint에는 다음 세 가지 옵션이 포함되어 있습니다.
| 자동 | SJS는 축 교차점을 설정합니다. |
|---|---|
| 최대값 | 축이 최대값에서 교차합니다. |
| 최소값 | 축이 최소값에서 교차합니다. |
사용자는 열거 유형 및 사용자 정의 숫자 유형을 지정된 위치에 지정할 수 있습니다.
이 코드 조각에서는 데이터를 추가하고, 다음 단계에 따라 지정된 축 교차를 나타내는 방법을 보여줍니다.
차트에서 crossPoint 기본 범주 축을 3으로 설정합니다.
차트에서 crossPoint 기본 범주 축을 100으로 설정합니다.
축을 차트로 설정합니다.
var spread = GC.Spread.Sheets.findControl("ss") || GC.Spread.Sheets.findControl("sampleDiv");
var sheet = spread.getActiveSheet();
sheet.suspendPaint();
var dataArray = [
["month", 'fund', 'shares', 'financial products'],
[1, 100, -12, 19],
[2, -96, 15, 12],
[3, 53, 88, 8],
[4, -15, 150, 22],
[5, 77, -52, 6],
[6, 2, 66, 26],
];
sheet.setArray(0, 0, dataArray);
var chart = sheet.charts.add('chart1', GC.Spread.Sheets.Charts.ChartType.xyScatterSmooth, 100, 100, 500, 500, 'A1:E7');
let axes = chart.axes();
axes.primaryCategory.crossPoint = 3;
axes.primaryValue.crossPoint = 100;
chart.axes(axes);
sheet.resumePaint();위 코드 조각의 결과는 다음과 같습니다.
이것은 SpreadJS v14 릴리스에 추가된 향상된 새 차트 기능과 차트 유형 중 일부입니다. SpreadJS 무료 평가판을 다운로드하여 이러한 향상된 새 차트 기능을 알아보십시오.
댓글목록
등록된 댓글이 없습니다.
