概要と基本的な使い方

SpreadJSでは、Excel同様のチャート機能を使用してデータを可視化できます。サポートされているチャートは、棒グラフ、折れ線グラフ、円グラフ、面グラフ、XY散布図、株価チャート、複合チャート、レーダー、サンバースト、ツリーマップなどがあり、加えてトレンドラインやエラーバーの表示など、さまざまなカスタマイズ機能も提供します。また、チャートはExcelファイルからの入力や出力も可能です。

チャート機能を使用するには、文書のheadセクションに、jsファイルへのリンクを追加します。 チャートを作成するには、次に示すように、sheet.charts.addメソッドを使用します。 シートのチャートを取得するにはsheet.charts.getメソッドを、チャートを削除するにはsheet.charts.removeメソッドを使用します。作成したすべてのチャートを削除するにはsheet.charts.clearメソッドを使用します。 1つのチャートは、多数のサブ要素によって構成されます。個々の要素をカスタマイズするには、チャートAPIを使用します。 チャートエリア:チャートを表示する全体的な領域です。 チャートの背景色とフォントサイズをカスタマイズするには、次のコードを使用します。 チャートタイトル:チャートのタイトルです。 チャートタイトルのテキストを取得または設定することも、背景色、テキスト色、フォント、フォントサイズを指定することもできます。 系列:チャートにプロットされる一連のデータを構成する、データポイントの集合です。 チャートの系列コレクションに対して個々の系列を取得、追加、または削除することも、個々の系列の名前、枠線、幅、枠線の色、y値、x値、塗りつぶし色をカスタマイズすることもできます。 凡例:チャートの凡例は、チャートの閲覧者に対し、個々のデータ系列がどの記号または色に対応付けられているのかを示します。 チャートの凡例を取得または設定することも、凡例の位置を変更することもできます。チャートに凡例を表示するかどうかを指定することもできます。 データラベル:データラベルを使用すると、データ系列内のデータポイントに対し、詳細情報を表示できます。 チャートのデータラベルのスタイルを取得または設定することも、データラベルの位置や色を変更することもできます。チャートにデータラベルを表示するかどうかを指定することもできます。 また、以下のオプションでデータ系列ごとにデータラベルの表示方法やスタイルをカスタマイズすることもできます。 showValue showSeriesName showCategoryName showPercentage separator position format color transparency backColor backColorTransparency borderColor borderWidth borderColorTransparency 軸:チャートの軸です。 チャートの軸を取得または設定できます。軸には4つの種類があります。第1カテゴリ軸、第1値軸、第2カテゴリ軸、および第2値軸です。 第1カテゴリ軸、第1値軸、第2カテゴリ軸、および第2値軸は、同じ属性を有します。これらの4種類の軸のスタイル、線種、目盛位置、目盛ラベルの位置、書式、タイトル、およびグリッド線を取得または設定するには、次のコードを使用します(異なる種類の軸を使用するには、コード内の軸の種類を変更します)。 主グリッド線と補助グリッド線は、同じ属性を有します。グリッド線の色と幅を取得または設定できます。その表示/非表示を切り替えることもできます。 SpreadJSは、28種類ものチャートを備えています。現在のチャートの種類を取得または設定するには、次のコードを使用します。 SpreadJSは、空白(null)のセルを以下のように表示することができます。また #N/A値を空白として表示できます。 gaps: null値をチャートに表示しません。 zero: null値を0ゼロとして表示します。 connected: null値をスキップして次の値とつなげて表示します。 SpreadJSは、非表示の行または列のデータをチャートに表示するかしないかを設定できます。 SpreadJSは、Excelファイルのインポート時にサポートされていないチャートタイプを保存または無視することもできます。
window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 2 }); initSpread(spread); _getElementById("insertChart").addEventListener('click', function () { insertChart(spread) }); _getElementById("switchRowColumn").addEventListener('click', function () { switchRowColumn(spread) }); _getElementById("removeChart").addEventListener('click', function () { removeChart(spread) }); _getElementById("removeAllCharts").addEventListener('click', function () { removeAllChart(spread) }); _getElementById("groupSelect").addEventListener('change', function () { changeTypeSelect(); }); _getElementById("displayBlanksCells").addEventListener('change', function () { displayBlanksCells(spread, this.value); }); _getElementById("showNAAsBlanks").addEventListener('click', function () { showNAAsBlanks(spread, this.checked); }); _getElementById("ignoreHidden").addEventListener('click', function () { ignoreHiddenRowAndColumn(spread, this.checked); }); changeTypeSelect(); }; var chartType = [ [{ typeDesc: 'Clustered Column', type: GC.Spread.Sheets.Charts.ChartType.columnClustered }, { typeDesc: 'Stacked Column', type: GC.Spread.Sheets.Charts.ChartType.columnStacked }, { typeDesc: '100% Stacked Column', type: GC.Spread.Sheets.Charts.ChartType.columnStacked100 }], [{ typeDesc: 'Line', type: GC.Spread.Sheets.Charts.ChartType.line }, { typeDesc: 'Stacked Line', type: GC.Spread.Sheets.Charts.ChartType.lineStacked }, { typeDesc: '100% Stacked Line', type: GC.Spread.Sheets.Charts.ChartType.lineStacked100 }, { typeDesc: 'Line With Markers', type: GC.Spread.Sheets.Charts.ChartType.lineMarkers }, { typeDesc: 'Stacked Line With Markers', type: GC.Spread.Sheets.Charts.ChartType.lineMarkersStacked }, { typeDesc: '100% Stacked Line With Markers', type: GC.Spread.Sheets.Charts.ChartType.lineMarkersStacked100 }], [{ typeDesc: 'Pie', type: GC.Spread.Sheets.Charts.ChartType.pie }, { typeDesc: 'Doughnut', type: GC.Spread.Sheets.Charts.ChartType.doughnut }], [{ typeDesc: 'Clustered Bar', type: GC.Spread.Sheets.Charts.ChartType.barClustered }, { typeDesc: 'Stacked Bar', type: GC.Spread.Sheets.Charts.ChartType.barStacked }, { typeDesc: '100% Stacked Bar', type: GC.Spread.Sheets.Charts.ChartType.barStacked100 }], [{ typeDesc: 'Area', type: GC.Spread.Sheets.Charts.ChartType.area }, { typeDesc: 'Stacked Area', type: GC.Spread.Sheets.Charts.ChartType.areaStacked }, { typeDesc: '100% Stacked Area', type: GC.Spread.Sheets.Charts.ChartType.areaStacked100 }], [{ typeDesc: 'Scatter', type: GC.Spread.Sheets.Charts.ChartType.xyScatter }, { typeDesc: 'Scatter With Smooth Lines And Markers', type: GC.Spread.Sheets.Charts.ChartType.xyScatterSmooth }, { typeDesc: 'Scatter With Smooth Lines', type: GC.Spread.Sheets.Charts.ChartType.xyScatterSmoothNoMarkers }, { typeDesc: 'Scatter With Straight Lines And Markers', type: GC.Spread.Sheets.Charts.ChartType.xyScatterLines }, { typeDesc: 'Scatter With Straight Lines', type: GC.Spread.Sheets.Charts.ChartType.xyScatterLinesNoMarkers }, { typeDesc: 'Bubble', type: GC.Spread.Sheets.Charts.ChartType.bubble }], [{ typeDesc: 'High-Low-Close', type: GC.Spread.Sheets.Charts.ChartType.stockHLC }, { typeDesc: 'Open-High-Low-Close', type: GC.Spread.Sheets.Charts.ChartType.stockOHLC }, { typeDesc: 'Volume-High-Low-Close', type: GC.Spread.Sheets.Charts.ChartType.stockVHLC }, { typeDesc: 'Volume-Open-High-Low-Close', type: GC.Spread.Sheets.Charts.ChartType.stockVOHLC }] ]; function initSpread(spread) { var sheet1 = spread.sheets[0]; sheet1.name("Common Chart"); var sheet2 = spread.sheets[1]; sheet2.name("Custom Chart"); initSheet(sheet1); initSheet(sheet2); //add chart initChart(sheet1); initChart(sheet2); //custom chart customChartStyle(sheet2); } function initSheet(sheet) { sheet.suspendPaint(); //prepare data for chart var dataArray = [ ["", 'Chrome', 'FireFox', 'IE', 'Safari', 'Edge', 'Opera', 'Other'], ["2015", 0.5651, 0.1734, 0.1711, 0.427, 0, 0.184, 0.293], ["2016", 0.6230, 0.1531, 0.1073, 0.464, 0.311, 0.166, 0.225], ["2017", 0.6360, 0.1304, 0.834, 0.589, 0.443, 0.223, 0.246] ]; sheet.setArray(0, 0, dataArray); sheet.resumePaint(); } function initChart(sheet) { //add common chart sheet.charts.add('Chart1', GC.Spread.Sheets.Charts.ChartType.columnClustered, 0, 100, 800, 300, "A1:H4"); } function customChartStyle(sheet) { var changeChart = sheet.charts.all()[0]; changeChartStyle(changeChart); } function changeChartStyle(chart) { //change orientation switchOrientation(chart); //change legend changeChartLegend(chart); //change chartArea changeChartArea(chart); //change chartTitle changeChartTitle(chart); //change dataLabels changeChartDataLabels(chart); //change axisTitles changeChartAxisTitles(chart); //change axesLine changeChartAxesLine(chart); //change series changeSeries(chart); //change gridLine changeGridLine(chart); //change seriesBorder changeSeriesBorder(chart); } function switchOrientation(chart) { chart.switchDataOrientation(); } function ignoreHiddenRowAndColumn(spread, value) { var activeSheet = spread.getActiveSheet(); var activeChart = getActiveChart(activeSheet); activeChart && activeChart.ignoreHidden(value); } function displayBlanksCells(spread, value) { var activeSheet = spread.getActiveSheet(); var activeChart = getActiveChart(activeSheet); var index = parseInt(value); if (index !== null && index !== undefined) { activeChart && activeChart.displayBlanksAs(index); } } function showNAAsBlanks(spread, value) { var activeSheet = spread.getActiveSheet(); var activeChart = getActiveChart(activeSheet); activeChart && activeChart.displayNaAsBlank(value); } function changeChartLegend(chart) { var legend = chart.legend(); legend.visible = true; var legendPosition = GC.Spread.Sheets.Charts.LegendPosition; legend.position = legendPosition.top; chart.legend(legend); } function changeChartArea(chart) { var chartArea = chart.chartArea(); chartArea.backColor = "rgba(93,93,93,1)"; chartArea.color = "rgba(255,255,255,1)"; chartArea.fontSize = 14; chart.chartArea(chartArea); } function changeChartTitle(chart) { var title = chart.title(); title.text = "Browser Market Share"; title.fontSize = 18; chart.title(title); } function changeChartDataLabels(chart) { var dataLabels = chart.dataLabels(); dataLabels.showValue = true; dataLabels.showSeriesName = false; dataLabels.showCategoryName = false; dataLabels.format = "0.00%"; var dataLabelPosition = GC.Spread.Sheets.Charts.DataLabelPosition; dataLabels.position = dataLabelPosition.outsideEnd; chart.dataLabels(dataLabels); } function changeChartAxisTitles(chart) { var axes = chart.axes(); axes.primaryCategory.title.text = 'Year'; axes.primaryCategory.title.fontSize = 14; chart.axes(axes); } function changeChartAxesLine(chart) { var axes = chart.axes(); axes.primaryValue.format = "0%"; chart.axes(axes); } function changeSeries(chart) { var series = chart.series(); var seriesItem = series.get(6); seriesItem.backColor = "#a3cf62"; series.set(6, seriesItem); } function changeGridLine(chart) { var axes = chart.axes(); axes.primaryCategory.majorGridLine.visible = false; axes.primaryValue.majorGridLine.visible = false; chart.axes(axes); } function changeSeriesBorder(chart) { var series = chart.series().get(); for (var i = 0; i < series.length; i++) { var seriesItem = series[i]; seriesItem.border.color = 'rgb(255,255,255)'; seriesItem.border.width = 1; chart.series().set(i, seriesItem); } } function insertChart(spread) { var activeSheet = spread.getActiveSheet(); var dataRange = activeSheet.getSelections()[0]; if (!judgeIsEmptyOneCell(activeSheet, dataRange)) { var rangeToFormula = GC.Spread.Sheets.CalcEngine.rangeToFormula; var dataFormula = rangeToFormula(dataRange); var groupIndex = parseInt(_getElementById('groupSelect').value); var typeIndex = parseInt(_getElementById('typeSelect').value); if (groupIndex < chartType.length) { var typeArray = chartType[groupIndex]; if (typeIndex < typeArray.length) { var type = typeArray[typeIndex].type; try { activeSheet.charts.add('', type, 30, 120, 500, 300, dataFormula, GC.Spread.Sheets.Charts.RowCol.rows); } catch (e) { alert(e.message); } } } } } function switchRowColumn(spread) { var activeSheet = spread.getActiveSheet(); var activeChart = getActiveChart(activeSheet); if (activeChart) { var isSwitched = activeChart.switchDataOrientation(); if (!isSwitched) { alert("'Can't switch row/column"); } } } function removeChart(spread) { var activeSheet = spread.getActiveSheet(); var activeChart = getActiveChart(activeSheet); if (activeChart) { activeSheet.charts.remove(activeChart.name()); } } function removeAllChart(spread) { var activeSheet = spread.getActiveSheet(); activeSheet.charts.clear(); } function getActiveChart(sheet) { var activeChart = null; sheet.charts.all().forEach(function (chart) { if (chart.isSelected()) { activeChart = chart; } }); return activeChart; } function judgeIsEmptyOneCell(sheet, range) { if (range.rowCount === 1 && range.colCount === 1) { var cell = sheet.getCell(range.row, range.col); if (!cell.text()) { return true; } } return false; } function changeTypeSelect() { var index = parseInt(_getElementById('groupSelect').value); if (index !== null && index !== undefined && index < chartType.length) { _getElementById('typeSelect').innerHTML = ''; var typeArray = chartType[index]; for (var i = 0; i < typeArray.length; i++) { var item = typeArray[i]; var option = document.createElement('option'); var value = document.createAttribute('value'); value.nodeValue = i; option.setAttributeNode(value); option.innerHTML = item.typeDesc; _getElementById('typeSelect').appendChild(option); } } } function _getElementById(id) { return document.getElementById(id); }
<!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 id="ss" class="sample-spreadsheets"></div> <div class="options-container"> <p>まず、セル範囲を選択します。チャートのグループと種類を選択し、[チャートを追加]をクリックすると、シートにチャートが追加されます。[行/列を入れ替え]をクリックすると、縦軸と横軸が入れ替わります。チャートを削除するには[チャートを削除]または[すべてのチャートを削除]をクリックします。 </p> <div class="option-row"> <label>グループ:</label> <select id="groupSelect" style="width: 80px;margin:5px"> <option value="0" selected="selected">Column</option> <option value="1">Line</option> <option value="2">Pie</option> <option value="3">Bar</option> <option value="4">Area</option> <option value="5">Scatter</option> <option value="6">Stock</option> </select> </div> <div class="option-row"> <label>種類:</label> <select id="typeSelect" style="width: 220px;margin:5px"></select> </div> <div class="option-row"> <input type="button" style="width: 150px;margin:5px ;margin-bottom: 15px;" value="チャートを追加" id="insertChart" /> <input type="button" style="width: 150px;margin:5px" value="行/列を入れ替え" id="switchRowColumn" /> <input type="button" style="width: 150px;margin:5px" value="チャートを削除" id="removeChart" /> <input type="button" style="width: 200px;margin:5px" value="すべてのチャートを削除" id="removeAllCharts" /> </div> <div class="option-row"> <label>空白セルの表示方法:</label> <select id="displayBlanksCells" style="width: 80px"> <option value="1" selected="selected">Gaps</option> <option value="2">Zero</option> <option value="0">Connect</option> </select> </div> <div class="option-row"> <input type="checkbox" id="showNAAsBlanks" ></input> <label for="showNAAsBlanks">#N/A値を空白として表示する</label> </div> <div class="option-row"> <input type="checkbox" id="ignoreHidden" checked></input> <label for="ignoreHidden">非表示の行や列のデータを描画しない</label> </div> </div> </div> </body> </html>
.sample-tutorial { position: relative; height: 100%; overflow: hidden; } .sample-spreadsheets { width: calc(100% - 280px); height: 100%; overflow: hidden; float: left; } .options-container { float: right; width: 280px; padding: 12px; height: 100%; box-sizing: border-box; background: #fbfbfb; overflow: auto; } .option-row { font-size: 14px; padding: 2px; margin-top: 2px; } .sample-options { z-index: 1000; } label { margin-bottom: 6px; } p{ padding:2px 10px; background-color:lavender; } input { padding: 2px 6px; } input[type=button] { margin-top: 6px; display: block; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }