如何通过代码绘制图表

收藏

本帖最后由 ClarkPan 于 2020-5-5 18:07 编辑

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

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
接下来我们需要设置具体的图表数据
设置标题：

var title = chart.title();
title.text = "Annual Sales Record";
title.fontFamily = "Cambria";
title.fontSize = 28;
title.color = "#696969";
chart.title(title);

复制代码

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

var chartArea = chart.chartArea();
chartArea.backColor = "#DBF3FA";
chartArea.backColorTransparency = 0.1;
chartArea.fontSize = 14;
// Set ChartArea's Border Style
chartArea.border.width = 3;
chartArea.border.dashStyle = 4;
chartArea.border.color = "red";
chartArea.border.transparency = 0.5;
chart.chartArea(chartArea);

复制代码

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

var legend = chart.legend();
legend.visible = true;
chart.legend(legend);

复制代码

之后可以设置图例的样式

// Set Visibilty of legend to true
legend.visible = true;
legend.color = 'Green';
legend.fontSize = 12;
legend.fontFamily = 'Calibri';
legend.backColor = 'Yellow';
// Customize Legend Position
// Change legend's position to topRight
var legendPosition = GC.Spread.Sheets.Charts.LegendPosition;
legend.position = legendPosition.topRight;
// Customize Legend Style
// Change legend's borderstyle
legend.borderStyle.width = 1;
legend.borderStyle.color = "blue";
legend.borderStyle.backColor = "Red";
chart.legend(legend);

复制代码

设置series系列，例如：

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

复制代码

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

var axes = chart_columnClustered.axes();
// Configure Primary Category Axis
axes.primaryCategory.style.color = 'green';
axes.primaryCategory.title.color = 'green';
axes.primaryCategory.title.text = 'Primary Category Axes';
// Configure Primary Value Axis
axes.primaryValue.style.color = 'blue';
axes.primaryValue.title.color = 'blue';
axes.primaryValue.title.text = 'Primary Value Axes';
axes.primaryValue.title.fontSize = 16;
// Configure BuiltIn DisplayUnit for "Primary Value Axis"
axes.primaryValue.displayUnit = {
unit: GC.Spread.Sheets.Charts.DisplayUnit.thousands, // BuiltIn DisplayUnit is thousands
visible: true,
style: {
color: 'red',
transparency: 0.1,
fontFamily: 'arial',
fontSize: 14
}
};

复制代码

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

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

复制代码

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

var ser1 = chart.series().get(0);
ser1.symbol =
{
fill: 'red',
fillColorTransparency: 0.3,
size: 20,
shape: GC.Spread.Sheets.Charts.SymbolShape.triangle,
border:
{
color: "green",
width: 2,
lineType: GC.Spread.Sheets.Charts.LineType.solid,
colorTransparency: 0.5,
}
}
chart.series().set(0, ser1);

复制代码

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

axes.primaryValue.majorGridLine.visible = true;
axes.primaryValue.majorGridLine.color = "Yellow";
axes.primaryValue.majorGridLine.width = 1;
axes.primaryValue.minorGridLine.visible = true;
axes.primaryValue.minorGridLine.color = "Orange";
axes.primaryValue.minorGridLine.width = 1;
axes.primaryCategory.majorGridLine.visible = true;
axes.primaryCategory.majorGridLine.color = "Green";
axes.primaryCategory.majorGridLine.width = 1;
axes.primaryCategory.minorGridLine.visible = true;
axes.primaryCategory.minorGridLine.color = "lightblue";
axes.primaryCategory.minorGridLine.width = 1;

复制代码

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

		自动登录	找回密码
密码			立即注册

如何通过代码绘制图表

0 个回复

讲师达人

悬赏达人

微信认证勋章

SpreadJS 认证

SpreadJS 高级认证

元老葡萄