円グラフ

SpreadJSでは円グラフがサポートされます。円グラフには、ワークシートの列または行ごとにまとめたデータをプロットできます。

<p>Spreadに<strong>円</strong>グラフを追加し、チャートのスタイルを変更するには、チャートAPIを使用します。円グラフでは、1グループのデータしか表示できません。したがって、系列情報を取得するには<strong>chart.series().get()</strong>関数を使用します。円グラフでは、1つのデータ系列における各項目の占有率を示します。データポイントは、円全体に対する比率として表示されます。</p> <pre><code class="hljs js language-js"> <span class="hljs-keyword">var</span> chart = sheet.charts.add(<span class="hljs-string">'pie'</span>, GC.Spread.Sheets.Charts.ChartType.pie, <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>) <span class="hljs-keyword">var</span> series = chart.series().get(index ?) <span class="hljs-keyword">var</span> ser = series[<span class="hljs-number">0</span>].border.color = <span class="hljs-string">'red'</span>; chart.series.set(index, ser); </code></pre> <p>Spreadに<strong>ドーナツ</strong>グラフを追加し、チャートのスタイルを変更するには、チャートAPIを使用します。ドーナツグラフには、すべての系列を表示できます。個々のデータ系列は、1つのリングとして表示されます。</p> <pre><code class="hljs js language-js"> <span class="hljs-keyword">var</span> chart = sheet.charts.add(<span class="hljs-string">'doughnut'</span>, GC.Spread.Sheets.Charts.ChartType.doughnut, <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>) <span class="hljs-keyword">var</span> series = chart.series().get(index ?) <span class="hljs-keyword">var</span> ser = series[<span class="hljs-number">0</span>].border.width = <span class="hljs-number">3</span>; chart.series.set(index, ser); </code></pre>
window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {sheetCount: 2}); initSpread(spread); }; function initSpread(spread) { spread.suspendPaint(); var sheets = spread.sheets; initPieSheet(sheets[0]); initPieChart(sheets[0]); initDoughnutSheet(sheets[1]); initDoughnutChart(sheets[1]); spread.resumePaint(); } function initPieSheet(sheet) { sheet.name('Pie'); //prepare data for chart var dataArray = [ ["", 'Chrome', 'Firefox', 'IE', 'Safari', 'Edge', 'Opera', 'Other'], ["2017", 0.6360, 0.1304, 0.0834, 0.0589, 0.0443, 0.0223, 0.0246] ]; sheet.setArray(0, 0, dataArray); } function initPieChart(sheet) { var chart = sheet.charts.add('PieChart1', GC.Spread.Sheets.Charts.ChartType.pie, 0, 50, 600, 400, "A1:H2"); showPieDataLabels(chart); changePieStyle(chart); changeChartTitle(chart); } function changeChartTitle(chart) { var title = chart.title(); title.text = "Browser Market Share"; title.fontSize = 18; chart.title(title); } // show dataLabels function showPieDataLabels(chart) { var dataLabels = chart.dataLabels(); dataLabels.showValue = true; dataLabels.showSeriesName = false; dataLabels.showCategoryName = true; dataLabels.format = "0.00%"; var dataLabelPosition = GC.Spread.Sheets.Charts.DataLabelPosition; dataLabels.position = dataLabelPosition.bestFit; chart.dataLabels(dataLabels); } //change pie color function changePieStyle(chart) { chart.legend({position:GC.Spread.Sheets.Charts.LegendPosition.right}); var seriesItem = chart.series().get(0); seriesItem.backColor = 'rgb(91, 155, 213),rgb(237, 125, 49),rgb(165, 165, 165),rgb(255, 192, 0),rgb(68, 114, 196),rgb(112, 173, 71),rgb(255,20,128)'; seriesItem.border.width = 3; chart.series().set(0, seriesItem); } function initDoughnutSheet(sheet) { sheet.name('Doughnut'); sheet.suspendPaint(); //prepare data for chart var dataArray = [ ["", 'Chrome', 'Firefox', 'IE', 'Safari', 'Edge', 'Opera', 'Other'], ["2014", 0.4966, 0.1801, 0.2455, 0.0470, 0.0, 0.0150, 0.0158], ["2015", 0.5689, 0.1560, 0.1652, 0.0529, 0.0158, 0.0220, 0.0192], ["2016", 0.6230, 0.1531, 0.1073, 0.0464, 0.0311, 0.0166, 0.0225], ["2017", 0.6360, 0.1304, 0.0834, 0.0589, 0.0443, 0.0223, 0.0246] ]; sheet.setArray(0, 0, dataArray); sheet.resumePaint(); } function initDoughnutChart(sheet) { var chart = sheet.charts.add('DoughnutChart1', GC.Spread.Sheets.Charts.ChartType.doughnut, 0, 100, 600, 320, "A1:H5"); changeDoughnutColor(chart); changeDoughnutLegendPosition(chart); changeChartTitle(chart); } //change doughnut color function changeDoughnutColor(chart) { var series = chart.series().get(); for (var i = 0; i < series.length; i++) { var seriesItem = series[i]; seriesItem.backColor = 'rgb(91, 155, 213),rgb(237, 125, 49),rgb(165, 165, 165),rgb(255, 192, 0),rgb(68, 114, 196),rgb(112, 173, 71),rgb(255,20,128)'; chart.series().set(i, seriesItem); } } function changeDoughnutLegendPosition(chart){ chart.legend({position:GC.Spread.Sheets.Charts.LegendPosition.right}); }
<!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-tutorial"></div> </div> </body> </html>
.sample-tutorial { position: relative; height: 100%; overflow: hidden; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }