折线图

在worksheet中,以行或者列的方式来组织的数据也可以用折线图来很好的表示。在折线图中,分类数据沿着水平轴均匀分布,值数据沿着垂直轴均匀分布。折线图可以在均匀的按比例缩放的坐标轴上显示一段时间内的连续数据,因此非常适合用来显示相等的时间间隔里(如月、季度或者财年)数据的变化趋势。

SpreadJS 支持折线图、堆积折线图、百分比堆积折线图、数据点折线图、数据点堆积折线图、数据点百分比堆积折线图。通过 GC.Spread.Sheets.Charts.ChartType.line 来指定chartType为折线图。 您可以将折线图添加到Spread,并使用图表API更改其样式(如平滑线条) 折线图也可以是堆积折线图、百分比堆积折线图、数据点折线图、数据点堆积折线图、数据点百分比堆积折线图。使用 GC.Spread.Sheets.Charts.ChartType.lineStacked , GC.Spread.Sheets.Charts.ChartType.lineStacked100, GC.Spread.Sheets.Charts.ChartType.lineMarkers, GC.Spread.Sheets.Charts.ChartType.lineMarkersStacked, GC.Spread.Sheets.Charts.ChartType.lineMarkersStacked100 来指定这两种柱形图 你可以自定制图表中系列标记的颜色,形状以及标记边框: 折线图和数据点折线图: 折线图在显示时可以带有指示单个数据值的标记,也可以不带标记,可显示一段时间或均匀分布的类别的趋势,特别是你有多个数据点,并且这些数据点的出现顺序非常重要时。当有许多类别或值的大小接近时,请使用无数据点折线图。 堆积折线图和数据点堆积折线图: 堆积折线图显示时可带有标记以指示各个数据值,也可以不带标记,可显示每个值所占大小随着时间或均匀分布的类别而变化的趋势。 百分比堆积折线图和数据点百分比堆积折线图: 百分比堆积折线图显示时可带有标记以指示各个数据值,也可以不带标记,可显示每个值所占的百分比随时间或均匀分布的类别而变化的趋势。如果有许多类别或值大小接近,请使用无数据点百分比堆积折线图。
window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {sheetCount: 6}); initSpread(spread); }; function initSpread(spread) { var chartType = [{ type: GC.Spread.Sheets.Charts.ChartType.line, desc: "line", }, { type: GC.Spread.Sheets.Charts.ChartType.lineStacked, desc: "lineStacked", }, { type: GC.Spread.Sheets.Charts.ChartType.lineStacked100, desc: "lineStacked100", }, { type: GC.Spread.Sheets.Charts.ChartType.lineMarkers, desc: "lineMarkers", withMarker: true, }, { type: GC.Spread.Sheets.Charts.ChartType.lineMarkersStacked, desc: "lineMarkersStacked", withMarker: true, }, { type: GC.Spread.Sheets.Charts.ChartType.lineMarkersStacked100, desc: "lineMarkersStacked100", withMarker: true, }]; spread.suspendPaint(); var sheets = spread.sheets; for (var i = 0; i < chartType.length; i++) { var sheet = sheets[i]; initSheet(sheet, chartType[i].desc); initChart(sheet, chartType[i].type, chartType[i].withMarker);//add chart } spread.options.tabStripRatio = 0.8; spread.resumePaint(); } function initSheet(sheet, sheetName) { sheet.name(sheetName); //prepare data for chart var dataArray = [ ["", '2012', '2013', '2014', '2015', '2016', '2017'], ["Chrome", 0.3782, 0.5663, 0.4966, 0.6689, 0.4230, 0.6360], ["FireFox", 0.1284, 0.2030, 0.2801, 0.2560, 0.1531, 0.3304], ["IE", 0.3214, 0.2491, 0.2455, 0.1652, 0.2073, 0.0834], ]; sheet.setArray(0, 0, dataArray); } function initChart(sheet, chartType, marker) { //add chart let chart = sheet.charts.add((sheet.name() + 'Chart1'), chartType, 10, 85, 450, 350, "A1:G4", GC.Spread.Sheets.Charts.RowCol.rows); changeChartLegend(chart); changeChartArea(chart); changChartDataLabels(chart); changeGridLines(chart); changeLineStyle(chart, false); changeChartAxes(chart); changeChartTitle(chart); if (marker) { changeMarker(chart); } chart = sheet.charts.add((sheet.name() + 'Chart2'), chartType, 470, 85, 450, 350, "A1:G4", GC.Spread.Sheets.Charts.RowCol.rows); changeChartLegend(chart); changeChartArea(chart); changChartDataLabels(chart); changeGridLines(chart); changeLineStyle(chart, true); changeChartAxes(chart); changeChartTitle(chart); if (marker) { changeMarker(chart); } } function changeChartTitle(chart) { var title = chart.title(); title.text = "Browser Market Share"; title.fontSize = 18; chart.title(title); } //change legend position function changeChartLegend(chart) { var legend = chart.legend(); legend.visible = true; var legendPosition = GC.Spread.Sheets.Charts.LegendPosition; legend.position = legendPosition.bottom; chart.legend(legend); } //change backColor function changeChartArea(chart) { var chartArea = chart.chartArea(); chartArea.fontSize = 14; chart.chartArea(chartArea); } // show dataLabels function changChartDataLabels(chart) { var dataLabels = chart.dataLabels(); dataLabels.showValue = true; dataLabels.showSeriesName = false; dataLabels.showCategoryName = false; dataLabels.format = "0%"; var dataLabelPosition = GC.Spread.Sheets.Charts.DataLabelPosition; dataLabels.position = dataLabelPosition.above; chart.dataLabels(dataLabels); } // hide gridLines function changeGridLines(chart) { var gridLinesAxes = chart.axes(); gridLinesAxes.primaryValue.min = null; chart.axes(gridLinesAxes); } //change legend position function changeChartAxes(chart) { chart.axes({primaryValue:{format:"0%"}}); } // change line style function changeLineStyle(chart, smooth) { var series = chart.series().get(); var seriesItem; for (var i = 0; i < series.length; i++) { seriesItem = series[i]; seriesItem.border.width = 2; seriesItem.smooth = smooth; chart.series().set(i, seriesItem); } } // change Marker function changeMarker(chart) { var preSet = [ { fill: "", shape: 0 /** circle */, size: 7, border: { color: "blue", width: 1 } }, { fill: "", shape: 8/** star */, size: 9, border: { color: "black", width: 1 } }, { fill: "yellow", shape: 2 /** diamond */, size: 7, border: { color: "red", width: 2 } }, ]; var series = chart.series().get(); var seriesItem; for (var i = 0; i < series.length; i++) { seriesItem = series[i]; seriesItem.symbol = preSet[i]; chart.series().set(i, seriesItem); } }
<!doctype html> <html style="height:100%;font-size:14px;"> <head> <meta name="spreadjs culture" content="zh-cn" /> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-shapes/dist/gc.spread.sheets.shapes.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-charts/dist/gc.spread.sheets.charts.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-resources-zh/dist/gc.spread.sheets.resources.zh.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script> <script src="app.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <div class="sample-tutorial"> <div id="ss" class="sample-tutorial"></div> </div> </body> </html>
.sample-tutorial { position: relative; height: 100%; overflow: hidden; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }