坐标轴

您可以自己定义图表的横纵坐标轴样式。使用Javascript代码自定义属性,例如颜色,线条样式,刻度线和刻度线标签位置,格式以及标题字体大小。

你可以通过如下方式来获取或者设置一个chart的坐标轴,坐标轴共有四种:主要(分类)坐标轴、主要(值)坐标轴、次要(分类)坐标轴、次要(值)坐标轴。 主要(分类)坐标轴、主要(值)坐标轴、次要(分类)坐标轴、次要(值)坐标轴的类型是一样的,你可以获取或设置它们的样式 (坐标轴可设置的属性包括:lineStyle, tickPosition, tickLabelPosition, format, title and gridLine) 主要网格线、次要网格线有着同样的类型,你可以获取或设置它们的样式 (网格线可设置的属性包括:color, width, visibility) Logarithmic Axes: 图表的数据轴可以设置为对数轴. Label Position: SpreadJS支持通过设置以下枚举值来设置轴的标签位置 GC.Spread.Sheets.Charts.TickLabelPosition. high low nextToAxis none Axis Orientation: SpreadJS支持设置轴的方向 Display Unit: 通过 displayUnit 属性,你可以将百万/万亿显示为单位,而不是实际的大数字。 此功能有助于节省空间并更易于阅读。 Date axis: SpreadJS 图表支持日期轴,你可以的调整显示的日期单位,以及单位的跨度。 baseUnit majorUnit majorUnitScale minorUnit minorUnitScale Crosses: SpreadJS支持通过设置数字或者以下枚举值来改变轴之间的交叉。GC.Spread.Sheets.Charts.AxisCrossPoint. automatic maximum minimum
var spread; window.onload = function () { spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 2 }); var sheet = spread.getActiveSheet(); sheet.suspendPaint(); sheet.setValue(0, 1, "Apple"); sheet.setValue(0, 2, "Banana"); sheet.setValue(0, 3, "Pear"); sheet.setValue(1, 0, "People1"); sheet.setValue(2, 0, "People2"); sheet.setValue(3, 0, "People3"); for (var r = 1; r <= 3; r++) { for (var c = 1; c <= 3; c++) { sheet.setValue(r, c, parseInt(Math.random() * 100)); } } var dataArray = [ ["Month", 'Fund Income', 'Stock Income', 'Bank Interest Income'], ["Jan", 100, 2, 9], ["Feb", -96, 15, 10], ["Mar", 53, 88, 8], ["Apr", -15, 150, 1], ["May", 77, -52, 20], ["Jun", 20, 66, 6], ["Jul", 60, 2, 9], ["Aug", -26, 15, 30], ["Sep ", 23, 78, 8], ["Oct", -15, 100, 21], ["Nov", 57, -52, 3], ["Dec", 30, 55, 16], ]; sheet.setArray(0, 6, dataArray); sheet.getRange(1, 7, 12, 3).formatter("$#,##0.00"); //add chart var Charts = GC.Spread.Sheets.Charts; var columnChart = sheet.charts.add('columnChart', Charts.ChartType.columnClustered, 10, 100, 400, 350); var lineChart = sheet.charts.add('lineChart', GC.Spread.Sheets.Charts.ChartType.line, 420, 100, 400, 350); var orientationChart = sheet.charts.add('orientationChart', Charts.ChartType.columnClustered, 830, 100, 400, 350,'A1:D4'); var series = columnChart.series(); series.add({ chartType: Charts.ChartType.columnClustered, axisGroup: Charts.AxisGroup.primary, name: "Sheet1!$A$2", xValues: "Sheet1!$B$1:$D$1", yValues: "Sheet1!$B$2:$D$2" }); series.add({ chartType: Charts.ChartType.columnClustered, axisGroup: Charts.AxisGroup.primary, name: "Sheet1!$A$3", xValues: "Sheet1!$B$1:$D$1", yValues: "Sheet1!$B$3:$D$3" }); series.add({ chartType: Charts.ChartType.lineMarkers, axisGroup: Charts.AxisGroup.secondary, name: "Sheet1!$A$4", xValues: "Sheet1!$B$1:$D$1", yValues: "Sheet1!$B$4:$D$4" }); var axes = columnChart.axes(); axes.primaryCategory.style.color = 'orange'; axes.primaryCategory.title.color = 'orange'; axes.primaryCategory.title.text = 'Primary Category Axis'; axes.primaryValue.style.color = 'red'; axes.primaryValue.title.color = 'red'; axes.primaryValue.title.text = 'Primary Value Logarithmic Axis'; axes.primaryValue.title.fontSize = 16; axes.primaryValue.scaling = { logBase: 2 }; axes.secondaryCategory.visible = true; axes.secondaryCategory.style.color = 'green'; axes.secondaryCategory.title.color = 'green'; axes.secondaryCategory.title.text = 'Secondary Category Axis'; axes.secondaryCategory.title.fontSize = 16; axes.secondaryValue.style.color = 'blue'; axes.secondaryValue.title.color = 'blue'; axes.secondaryValue.format = 'General'; axes.secondaryValue.title.text = 'Secondary Value Axis'; var columnChartTitle = columnChart.title(); columnChartTitle.text = "Product Sales"; columnChart.title(columnChartTitle); columnChart.axes(axes); series = lineChart.series(); series.add({ chartType: Charts.ChartType.line, axisGroup: Charts.AxisGroup.primary, name: "Sheet1!$H$1", xValues: "Sheet1!$G$2:$G$13", yValues: "Sheet1!$H$2:$H$13" }); series.add({ chartType: Charts.ChartType.columnClustered, axisGroup: Charts.AxisGroup.secondary, name: "Sheet1!$I$1", xValues: "Sheet1!$G$2:$G$13", yValues: "Sheet1!$I$2:$I$13" }); series.add({ chartType: Charts.ChartType.columnClustered, axisGroup: Charts.AxisGroup.secondary, name: "Sheet1!$J$1", xValues: "Sheet1!$G$2:$G$13", yValues: "Sheet1!$J$2:$J$13" }); axes = lineChart.axes(); axes.primaryCategory.crossPoint = 6; axes.primaryCategory.tickLabelSpacing = 2; axes.secondaryValue.visible = false; lineChart.axes(axes); var series1 = lineChart.series().get(0); series1.smooth = true; lineChart.series().set(0, series1); var lineChartTitle = lineChart.title(); lineChartTitle.text = "First Half Financial Income"; lineChart.title(lineChartTitle); var axes2 = orientationChart.axes(); var orientationChartTitle = orientationChart.title(); orientationChartTitle.text = "Product Sales(reverse order)"; orientationChart.title(orientationChartTitle); axes2.primaryValue.scaling = { orientation: GC.Spread.Sheets.Charts.AxisOrientation.maxMin }; orientationChart.axes(axes2); sheet.resumePaint(); };
<!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$/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; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }