数据点

你可以自定义图表的系列数据点样式。

在系列风格的基础上,你可以为一些特殊的有意义的数据点设置特殊的风格,数据点风格可以使数据呈现更加集中,图表更加直观和高效。 对于不同的图表类型,数据点样式支持以下自定义功能 backColor - 数据点或点标记的纯色或图案背景颜色。 backColorTransparency - 数据点或点标记的背景颜色透明度。 border.color - 数据点的边界颜色。 border.transparency - 数据点的边界颜色透明度。 border.width - 数据点的边界宽度。 border.lineType - 数据点的边界线类型。 你可以通过以下代码自定义图表的数据点样式
var spread; var colorArray = ['rgb(120, 180, 240)', 'rgb(240, 160, 80)', 'rgb(140, 240, 120)', 'rgb(120, 150, 190)']; window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 4 }); initSpread(spread); } function initSpread(spread) { var chartType = [{ type: GC.Spread.Sheets.Charts.ChartType.columnClustered, desc: "columnClustered", position: [15, 100, 1300, 400], dataArray: [ ["", 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' ], ["Tokyo", 49.9, 71.5, 106.4, 129.2, 144.0, 146.0, 135.6, 148.5, 256.4, 155.1, 95.6, 54.4 ], ["New York", 83.6, 78.8, 98.5, 93.4, 106.0, 199.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, 186.2, 59.3, 51.2 ], ["Berlin", 42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 178.6, 39.1, 46.8, 51.1] ], dataFormula: "A1:M5", dataPoinsStyle: [{ 8: { backColor: "red", backColorTransparency: 0.1, border: { color: 'rgb(120, 180, 240)', width: 5, } }, }, { 5: { backColor: "black", backColorTransparency: 0.1, border: { color: 'rgb(240, 160, 80)', width: 5, } } }, { 9: { backColor: "black", backColorTransparency: 0.1, border: { color: 'rgb(140, 240, 120)', width: 5, } }, }, { 8: { backColor: "black", backColorTransparency: 0.1, border: { color: 'rgb(120, 150, 190)', width: 5, } } } ], changeStyle: function (chart, dataPoinsStyle) { changeChartTitle(chart, "The Average Monthly Rainfall"); changChartDataLabels(chart); chart.axes({ primaryValue: { title: { text: "Rainfall(mm)" } } }); changeChartSeriesColor(chart); changeChartSeriesDataPointStyle(chart, dataPoinsStyle); changeChartSeriesGapWidthAndOverLap(chart); } }, { type: GC.Spread.Sheets.Charts.ChartType.barClustered, desc: "barClustered", position: [15, 100, 1300, 400], dataArray: [ ["", 'Tokyo', 'New York', 'London', 'Berlin'], ["The First Quarter", 227.8, 260.9, 127, 110.1], ["The Second Quarter", 449.2, 283.9, 136.7, 167.8], ["The Third Quarter", 500.5, 300.5, 171, 165.4], ["The Fourth Quarter", 344.1, 282.4, 175.7, 137] ], dataFormula: "A1:E5", dataPoinsStyle: [, , { 0: { backColor: "red", backColorTransparency: 0.1, border: { color: 'gray', width: 5, } } } ], changeStyle: function (chart, dataPoinsStyle) { changeChartTitle(chart, "The Average Quarterly Rainfall"); changChartDataLabels(chart); changeChartSeriesColor(chart); changeChartSeriesDataPointStyle(chart, dataPoinsStyle); changeChartSeriesGapWidthAndOverLap(chart); } }, { type: GC.Spread.Sheets.Charts.ChartType.pie, desc: "pie", position: [15, 100, 700, 400], dataArray: [ ["", 'Chrome', 'Firefox', 'IE', 'Safari', 'Edge', 'Opera', 'Other'], ["2017", 0.6360, 0.1304, 0.0834, 0.0589, 0.0443, 0.0223, 0.0246] ], dataFormula: "A1:H2", dataPoinsStyle: [{ 0: { backColor: { type: GC.Spread.Sheets.Charts.PatternType.wideUpwardDiagonal, foregroundColor: "white", backgroundColor: "LightBlue", }, backColorTransparency: 0.1, }, },], changeStyle: function (chart, dataPoinsStyle) { changeChartTitle(chart, "Browser Market Share"); changChartDataLabels(chart); changeChartSeriesDataPointStyle(chart, dataPoinsStyle); } }, { type: GC.Spread.Sheets.Charts.ChartType.sunburst, desc: "sunburst", position: [300, 50, 700, 400], dataArray: [ ['Region', 'Subregion', 'Country', 'Population'], ['Asia', 'Southern', 'India', 1354051854], [, , 'Pakistan', 200813818], [, , 'Bangladesh', 166368149], [, , 'Others', 170220300], [, 'Eastern', 'China', 1415045928], [, , 'Japan', 127185332], [, , 'Others', 111652273], [, 'South-Eastern', , 655636576], [, 'Western', , 272298399], [, 'Central', , 71860465], ['Africa', 'Eastern', , 433643132], [, 'Western', , 381980688], [, 'Northern', , 237784677], [, 'Others', , 234512021], ['Europe', , , 742648010], ['Others', , , 1057117703] ], dataFormula: "A1:D17", dataPoinsStyle: [{ 6: { backColor: "limegreen ", border: { color: 'lightcyan ', width: 9, } } },], changeStyle: function (chart, dataPoinsStyle) { changeChartTitle(chart, "World Population"); changeChartSeriesDataPointStyle(chart, dataPoinsStyle); } } ]; var sheets = spread.sheets; spread.suspendPaint(); for (var i = 0; i < chartType.length; i++) { var sheet = sheets[i]; initSheet(sheet, chartType[i].desc, chartType[i].dataArray); var chart = addChart(sheet, chartType[i].type, chartType[i].dataFormula, chartType[i].position); //add chart chartType[i].changeStyle(chart, chartType[i].dataPoinsStyle); } spread.resumePaint(); } function initSheet(sheet, sheetName, dataArray) { sheet.name(sheetName); //prepare data for chart sheet.setArray(0, 0, dataArray); sheet.setColumnCount(100); } function addChart(sheet, chartType, dataFormula, position) { //add chart return sheet.charts.add((sheet.name() + 'Chart1'), chartType, position[0], position[1], position[2], position[3], dataFormula, GC .Spread.Sheets.Charts.RowCol.rows); } function changeChartTitle(chart, title) { chart.title({ text: title }); } // show dataLabels function changChartDataLabels(chart) { var dataLabels = chart.dataLabels(); dataLabels.showValue = true; dataLabels.showSeriesName = false; dataLabels.showCategoryName = false; var dataLabelPosition = GC.Spread.Sheets.Charts.DataLabelPosition; dataLabels.position = dataLabelPosition.outsideEnd; chart.dataLabels(dataLabels); } //change point style function changeChartSeriesDataPointStyle(chart, dataPoinsStyle) { var series = chart.series().get(); for (var i = 0; i < series.length; i++) { if (dataPoinsStyle[i]) { chart.series().set(i, { dataPoints: dataPoinsStyle[i] }); } } } //change color function changeChartSeriesColor(chart) { var series = chart.series().get(); for (var i = 0; i < series.length; i++) { chart.series().set(i, { backColor: colorArray[i] }); } } function changeChartSeriesGapWidthAndOverLap(chart) { var seriesItem = chart.series().get(0); seriesItem.gapWidth = 2; seriesItem.overlap = -0.5; chart.series().set(0, 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/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity/spread-sheets-resources-zh/dist/gc.spread.sheets.resources.zh.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity/spread-sheets-charts/dist/gc.spread.sheets.charts.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 class="sample-tutorial"> <div id="ss" class="sample-spreadsheets"></div> </div> </div> </body> </html>
.sample-tutorial { position: relative; height: 100%; overflow: hidden; } .sample-spreadsheets { width: 100%; height: 100%; overflow: hidden; float: left; } .option-row { font-size: 14px; padding: 5px; } .option-row { padding-bottom: 5px; } label { display:inline-block; } input{ padding: 1px 8px; box-sizing: border-box; width: 100%; } select{ width: 100%; } input[type=checkbox] { display: inline-block; width: auto; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }