チャートの水平・垂直チャート軸は、異なるスタイルのプロパティでカスタマイズすることができます。JavaScriptコードを使用して、色、線のスタイル、目盛りと目盛りのラベル位置、書式設定、タイトルのフォントサイズなどのプロパティをカスタマイズすることができます。特にダッシュボードやレポートとして実装している場合は、スプレッドシート全体のスタイルを一致させることが重要になることがあるので、他のチャート要素に加えて軸をカスタマイズできると便利です。

チャートの軸を取得または設定できます。軸には4つの種類があります。第1カテゴリ軸、第1値軸、第2カテゴリ軸、および第2値軸です。 第1カテゴリ軸、第1値軸、第2カテゴリ軸、および第2値軸は、同じ属性を有します。これらの4種類の軸のスタイル、線種、目盛位置、目盛ラベルの位置、書式、タイトル、およびグリッド線を取得または設定するには、次のコードを使用します(異なる種類の軸を使用するには、コード内の軸の種類を変更します) グリッド線の色、幅、可視性を取得または設定できます。 対数軸: SpreadJSは、軸の対数スケールをサポートしています。 表示単位ラベル: displayUnitプロパティを使用すると、実際の大きな数値の代わりに、百万 / 十億などの単位を値軸として表示できます。 この機能はスペースを節約するのに役立ちます。 日付軸: SpreadJSは次のプロパティで日付軸をサポートします。日付の単位と表示間隔を設定できます。 baseUnit majorUnit majorUnitScale minorUnit minorUnitScale 交点: 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'], [1, 100, 2, 9], [2, -96, 15, 2], [3, 53, 88, 8], [4, -15, 150, 1], [5, 77, -52, 3], [6, 20, 66, 6], ]; sheet.setArray(0, 6, dataArray); sheet.getRange(1, 7, 6, 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 xyScatterChart = sheet.charts.add('xyScatterChart', GC.Spread.Sheets.Charts.ChartType.xyScatterSmooth, 420, 100, 400, 350, 'G1:J7'); 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); var axes1 = xyScatterChart.axes(); var xyScatterChartTitle = xyScatterChart.title(); xyScatterChartTitle.text = "First Half Financial Income"; xyScatterChart.title(xyScatterChartTitle); axes1.primaryCategory.crossPoint = 3; xyScatterChart.axes(axes1); sheet.resumePaint(); };
<!doctype html> <html style="height:100%;font-size:14px;"> <head> <meta name="spreadjs culture" content="ja-jp" /> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/ja/purejs/node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/ja/purejs/node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ja/purejs/node_modules/@grapecity/spread-sheets-charts/dist/gc.spread.sheets.charts.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ja/purejs/node_modules/@grapecity/spread-sheets-resources-ja/dist/gc.spread.sheets.resources.ja.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; }