概要と基本的な使い方

SpreadJSでは、Excel同様のチャート機能を使用できます。チャート機能はプラグインとして提供されるため、Spread.Sheetsにチャートを簡単に、かつ柔軟に追加できます。

<p>チャート機能を使用するには、文書のheadセクションに、jsファイルへのリンクを追加します。</p> <pre><code class="hljs js language-js"> &lt;head&gt; ... &lt;script src='.../scripts/gc.spread.sheets.all.xx.x.x.min.js' type='text/javascript'&gt;&lt;/script&gt; &lt;script src='.../scripts/plugins/gc.spread.sheets.chart.xx.x.x.min.js' type='text/javascript'&gt;&lt;/script&gt; &lt;/head&gt; </code></pre> <p>チャートを作成するには、次に示すように、<strong>sheet.charts.add</strong>メソッドを使用します。</p> <pre><code class="hljs js language-js"> sheet.charts.add(<span class="hljs-string">'Chart1'</span>, GC.Spread.Sheets.Charts.ChartType.columnClustered, <span class="hljs-number">0</span>, <span class="hljs-number">100</span>, <span class="hljs-number">400</span>, <span class="hljs-number">300</span>, <span class="hljs-string">"A1:D4"</span>); </code></pre> <p>シートのチャートを取得するには<strong>sheet.charts.get</strong>メソッドを、チャートを削除するには<strong>sheet.charts.remove</strong>メソッドを使用します。作成したすべてのチャートを削除するには<strong>sheet.charts.clear</strong>メソッドを使用します。</p> <pre><code class="hljs js language-js"> <span class="hljs-keyword">var</span> chart = sheet.charts.all()[index ?]; <span class="hljs-comment">// インデックスでチャートを取得する。</span> <span class="hljs-keyword">var</span> chart1 = sheet.charts.get(<span class="hljs-string">'Chart1'</span>) <span class="hljs-comment">// 名前でチャートを取得する。</span> sheet.charts.remove(<span class="hljs-string">"Chart1"</span>); sheet.charts.clear(); </code></pre> <p>1つのチャートは、多数のサブ要素によって構成されます。個々の要素をカスタマイズするには、チャートAPIを使用します。</p> <p><strong>チャートエリア</strong>:チャートを表示する全体的な領域です。</p> <p>チャートの背景色とフォントサイズをカスタマイズするには、次のコードを使用します。</p> <pre><code class="hljs js language-js"> <span class="hljs-keyword">var</span> chartArea = chart.chartArea(); chartArea.backColor = <span class="hljs-string">"rgba(55,55,55,1)"</span>; chartArea.fontSize = <span class="hljs-number">14</span>; chart.chartArea(chartArea); </code></pre> <p><strong>チャートタイトル</strong>:チャートのタイトルです。</p> <p>チャートタイトルのテキストを取得または設定することも、背景色、テキスト色、フォント、フォントサイズを指定することもできます。</p> <pre><code class="hljs js language-js"> <span class="hljs-keyword">var</span> title = chart.title(); title.text = <span class="hljs-string">"Sample"</span>; title.fontFamily = <span class="hljs-string">"Calibri Light"</span>; chart.title(title); </code></pre> <p><strong>系列</strong>:チャートにプロットされる一連のデータを構成する、データポイントの集合です。</p> <p>チャートの系列コレクションに対して個々の系列を取得、追加、または削除することも、個々の系列の名前、枠線、幅、枠線の色、y値、x値、塗りつぶし色をカスタマイズすることもできます。</p> <pre><code class="hljs js language-js"> <span class="hljs-keyword">var</span> series = chart.series(); <span class="hljs-keyword">var</span> seriesItem = series.get(index ?); chart.series.remove(index ?); chart.series.add(seriesItem); seriesItem.name = <span class="hljs-string">"Sheet1!$G$1"</span>; seriesItem.yValues = <span class="hljs-string">"Sheet1!$G$2:$G$4"</span>; seriesItem.backColor = <span class="hljs-string">"#f15253"</span>; seriesItem.border.width = <span class="hljs-number">2</span>; series.set(index ?, seriesItem); </code></pre> <p><strong>凡例</strong>:チャートの凡例は、チャートの閲覧者に対し、個々のデータ系列がどの記号または色に対応付けられているのかを示します。</p> <p>チャートの凡例を取得または設定することも、凡例の位置を変更することもできます。チャートに凡例を表示するかどうかを指定することもできます。</p> <pre><code class="hljs js language-js"> <span class="hljs-keyword">var</span> legend = chart.legend(); legend.visible = <span class="hljs-literal">true</span>; <span class="hljs-keyword">var</span> legendPosition = GC.Spread.Sheets.Charts.LegendPosition; legend.position = legendPosition.top; <span class="hljs-comment">// 下、左、右に設定できます。</span> chart.legend(legend); </code></pre> <p><strong>データラベル</strong>:データラベルを使用すると、データ系列内のデータポイントに対し、詳細情報を表示できます。</p> <p>チャートのデータラベルのスタイルを取得または設定することも、データラベルの位置や色を変更することもできます。チャートにデータラベルを表示するかどうかを指定することもできます。</p> <pre><code class="hljs js language-js"> <span class="hljs-keyword">var</span> dataLabels = chart.dataLabels(); dataLabels.showValue = <span class="hljs-literal">true</span>; dataLabels.showSeriesName = <span class="hljs-literal">false</span>; dataLabels.showCategoryName = <span class="hljs-literal">false</span>; <span class="hljs-keyword">var</span> dataLabelPosition = GC.Spread.Sheets.Charts.DataLabelPosition; dataLabels.position = dataLabelPosition.outsideEnd; <span class="hljs-comment">// このポジションには多くのオプションがあり、異なるチャートタイプは異なるポジション値を適用します。</span> chart.dataLabels(dataLabels); </code></pre> <p><strong>軸</strong>:チャートの軸です。</p> <p>チャートの軸を取得または設定できます。軸には4つの種類があります。第1カテゴリ軸、第1値軸、第2カテゴリ軸、および第2値軸です。</p> <p>第1カテゴリ軸、第1値軸、第2カテゴリ軸、および第2値軸は、同じ属性を有します。これらの4種類の軸のスタイル、線種、目盛位置、目盛ラベルの位置、書式、タイトル、およびグリッド線を取得または設定するには、次のコードを使用します(異なる種類の軸を使用するには、コード内の軸の種類を変更します)。</p> <pre><code class="hljs js language-js"> <span class="hljs-keyword">var</span> axes = chart.axes(); <span class="hljs-comment">// 軸のスタイル: color, fontFamily, fontSize。</span> axes.primaryCategory.style.color = <span class="hljs-string">'#f15353'</span>; <span class="hljs-comment">// 軸の線スタイル: color, width。</span> axes.primaryCategory.lineStyle.width = <span class="hljs-number">0</span>; <span class="hljs-comment">// 軸の目盛り位置: majorTickPosition, minorTickPosition。</span> axes.primaryCategory.majorTickPosition = GC.Spread.Sheets.Charts.TickMark.none <span class="hljs-comment">// 軸の目盛りラベル位置。</span> axes.primaryCategory.tickLabelPosition = GC.Spread.Sheets.Charts.TickLabelPosition.none; <span class="hljs-comment">// 軸の形式。</span> axes.primaryCategory.format = <span class="hljs-string">'General'</span>; <span class="hljs-comment">// 軸のタイトル: text, color, fontFamily, font size。</span> axes.primaryCategory.title.text = <span class="hljs-string">'Test Axis Title'</span>; axes.primaryCategory.title.fontSize = <span class="hljs-number">14</span>; chart.axes(axes); </code></pre> <p>主グリッド線と補助グリッド線は、同じ属性を有します。グリッド線の色と幅を取得または設定できます。その表示/非表示を切り替えることもできます。</p> <pre><code class="hljs js language-js"> axes.primaryCategory.majorGridLine.color = <span class="hljs-string">'#f15353'</span>; axes.primaryCategory.majorGridLine.visible = <span class="hljs-literal">true</span>; </code></pre> <p>SpreadJSは、28種類ものチャートを備えています。現在のチャートの種類を取得または設定するには、次のコードを使用します。</p> <pre><code class="hljs js language-js"> <span class="hljs-keyword">var</span> chartType = chart.chartType(); </code></pre> <p>SpreadJSは、空白(null)のセルを以下のように表示することができます。また #N/A値を空白として表示できます。</p> <ul> <li><strong>gaps: null値をチャートに表示しません。</strong></li> <li><strong>zero: null値を0ゼロとして表示します。</strong></li> <li><strong>connected: null値をスキップして次の値とつなげて表示します。</strong></li> </ul> <pre><code class="hljs js language-js"> chart.displayBlanksAs(GC.Spread.Sheets.Charts.DisplayBlanksAs.gaps); chart.displayNaNAsBlank(<span class="hljs-literal">true</span>); </code></pre> <p>SpreadJSは、非表示の行または列のデータをチャートに表示するかしないかを設定できます。</p> <pre><code class="hljs js language-js"> chart.ignoreHidden(<span class="hljs-literal">false</span>); </code></pre>
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.displayNaNAsBlank(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" checked="checked"></input> <label for="showNAAsBlanks">#N/A値を空白として表示する</label> </div> <div class="option-row"> <input type="checkbox" id="ignoreHidden" checked="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; }