如何通过代码绘制图表

我们在日常的开发中往往会遇到需要动态生成图表的一些需求，虽然SpreadJS中提供了设计器可以快速的创建图表，但是通过设计器设计的图表无法满足动态创建的需求。所以需要在代码部分来生成图表。本教程将介绍如何用代码来生成图表。
首先图表需要依托于数据，我们需要先将数据存放在sheet中。这里可以显性的存放，也可以隐藏进行存放。
设置好数据之后，我们需要用chart中的add方法来添加一个图表，例如：

1. var chart = sheet2.charts.add("chart1",GC.Spread.Sheets.Charts.ChartType.line,500,100,400,200);

复制代码

第一个参数是图表名称，第二个参数是图表类型，后面的参数分别为图表的其实位置坐标（x,y）以及宽和高（w,h）
图表类型是一个枚举，具体支持的图表类型可以在下面的链接中查看：
https://demo.grapecity.com.cn/spreadjs/help/latest/content/SpreadJS~GC.Spread.Sheets.Charts.ChartType.html
接下来我们需要设置具体的图表数据
设置标题：

1. var title = chart.title();
   
2. title.text = "Annual Sales Record";
   
3. title.fontFamily = "Cambria";
   
4. title.fontSize = 28;
   
5. title.color = "#696969";
   
6. chart.title(title);

复制代码

标题中我们可以设置标题的颜色，字体，字体大小，内容等属性
设置绘制区域：

1. var chartArea = chart.chartArea();
   
2. chartArea.backColor = "#DBF3FA";
   
3. chartArea.backColorTransparency = 0.1;
   
4. chartArea.fontSize = 14;
   
5. 
   
6. // Set ChartArea's Border Style
   
7. chartArea.border.width = 3;
   
8. chartArea.border.dashStyle = 4;
   
9. chartArea.border.color = "red";
   
10. chartArea.border.transparency = 0.5;
    
11. chart.chartArea(chartArea);

复制代码

参考代码设置绘制区域的背景颜色，边框，字体等属性
设置图例：
首先可以控制图例是否显示

1. var legend = chart.legend();
   
2. legend.visible = true;
   
3. chart.legend(legend);

复制代码

之后可以设置图例的样式

1. // Set Visibilty of legend to true
   
2. legend.visible = true;
   
3. legend.color = 'Green';
   
4. legend.fontSize = 12;
   
5. legend.fontFamily = 'Calibri';
   
6. legend.backColor = 'Yellow';
   
7. 
   
8. // Customize Legend Position
   
9. 
   
10. // Change legend's position to topRight
    
11. var legendPosition = GC.Spread.Sheets.Charts.LegendPosition;
    
12. legend.position = legendPosition.topRight;
    
13. 
    
14. // Customize Legend Style
    
15. 
    
16. // Change legend's borderstyle
    
17. legend.borderStyle.width = 1;
    
18. legend.borderStyle.color = "blue";
    
19. legend.borderStyle.backColor = "Red";
    
20. chart.legend(legend);

复制代码

设置series系列，例如：

1. var seriesItem = {};
   
2.                 seriesItem.name = "Sheet1!$B$1";
   
3.                 seriesItem.xValues = "Sheet1!$A$2:$A$8";
   
4.                 seriesItem.yValues = "Sheet1!$B$2:$B$8";
   
5.                 chart.series().add(seriesItem)

复制代码

series是一个数组结构，用于添加多个系列，每个系列是一个对象结构，里面可以设置系列名称，x轴数据，y轴数据
设置坐标轴Axes：

1. var axes = chart_columnClustered.axes();
   
2. 
   
3. // Configure Primary Category Axis
   
4. axes.primaryCategory.style.color = 'green';
   
5. axes.primaryCategory.title.color = 'green';
   
6. axes.primaryCategory.title.text = 'Primary Category Axes';
   
7. 
   
8. 
   
9. 
   
10. // Configure Primary Value Axis
    
11. axes.primaryValue.style.color = 'blue';
    
12. axes.primaryValue.title.color = 'blue';
    
13. axes.primaryValue.title.text = 'Primary Value Axes';
    
14. axes.primaryValue.title.fontSize = 16;
    
15. 
    
16. 
    
17. 
    
18. // Configure BuiltIn DisplayUnit for "Primary Value Axis"
    
19. axes.primaryValue.displayUnit = {
    
20. unit: GC.Spread.Sheets.Charts.DisplayUnit.thousands,  // BuiltIn DisplayUnit is thousands
    
21. visible: true,
    
22. style: {
    
23.   color: 'red',
    
24.   transparency: 0.1,
    
25.   fontFamily: 'arial',
    
26.   fontSize: 14
    
27. }
    
28. };

复制代码

可以设置坐标轴的样式，单位及单位的样式等
设置数据标签Data Labels：

1. var dataLabels = chart.dataLabels();
   
2.     dataLabels.showValue = true;
   
3.     dataLabels.showSeriesName = false;
   
4.     dataLabels.showCategoryName = false;
   
5.     var dataLabelPosition = GC.Spread.Sheets.Charts.DataLabelPosition;
   
6.     dataLabels.position = dataLabelPosition.outsideEnd; // this position contains many options, different chart type applies different position value
   
7.     chart.dataLabels(dataLabels);

复制代码

设置数据标签的样式，数据标签可设置的属性包括:position, color, 是否显示data labels等等
设置数据点标记Data Markers：

1. var ser1 = chart.series().get(0);
   
2. ser1.symbol =
   
3. 
   
4. {
   
5.   fill: 'red',
   
6.   fillColorTransparency: 0.3,
   
7.   size: 20,
   
8.   shape: GC.Spread.Sheets.Charts.SymbolShape.triangle,
   
9.   border:
   
10. 
    
11.    {
    
12.      color: "green",
    
13.      width: 2,
    
14.      lineType: GC.Spread.Sheets.Charts.LineType.solid,
    
15.      colorTransparency: 0.5,
    
16.    }
    
17. }
    
18. chart.series().set(0, ser1);

复制代码

可以设置不同的数据点标记形状，如圆形，三角，方形，菱形等
设置网格线Gridlines

1. axes.primaryValue.majorGridLine.visible = true;
   
2. axes.primaryValue.majorGridLine.color = "Yellow";
   
3. axes.primaryValue.majorGridLine.width = 1;
   
4. 
   
5. axes.primaryValue.minorGridLine.visible = true;
   
6. axes.primaryValue.minorGridLine.color = "Orange";
   
7. axes.primaryValue.minorGridLine.width = 1;
   
8. 
   
9. axes.primaryCategory.majorGridLine.visible = true;
   
10. axes.primaryCategory.majorGridLine.color = "Green";
    
11. axes.primaryCategory.majorGridLine.width = 1;
    
12. 
    
13. axes.primaryCategory.minorGridLine.visible = true;
    
14. axes.primaryCategory.minorGridLine.color = "lightblue";
    
15. axes.primaryCategory.minorGridLine.width = 1;

复制代码

可以设置网格线的颜色，是否显示，宽度
通过上面的一系列设置我们可以用代码来控制并生成图表，这样就可以随时控制进行动态生成了。