面グラフ

面グラフには、ワークシートの列または行ごとにまとめたデータをプロットできます。面グラフを使用すると、プロットの変化の時系列推移を表すことができます。プロット値の合計を示すことで、合計値の傾向を強調できます。

<p>SpreadJSでは、面グラフ、積み上げ面グラフ、および100%積み上げ面グラフがサポートされます。チャートの種類を取得するには、<strong>GC.Spread.Sheets.Charts.ChartType.area</strong>プロパティを使用します。</p> <p>面グラフをSpreadに追加し、そのスタイルを変更するには、チャートAPIを使用します。</p> <pre><code class="hljs js language-js"> <span class="hljs-keyword">var</span> chart = sheet.charts.add(<span class="hljs-string">'line'</span>, GC.Spread.Sheets.Charts.ChartType.area, <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> title = chart.title() title.text = <span class="hljs-string">'DEMO'</span>; chart.title(title); </code></pre> <p><strong>面:</strong>経時的な傾向を示します。</p> <p><strong>積み上げ面:</strong>個々の値の経時的な貢献度、または他のカテゴリデータの傾向を示します。</p> <p><strong>100%積み上げ面:</strong>個々の値の経時的な貢献度、または他のカテゴリデータの傾向を百分率(%)で示します。</p>
window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {sheetCount: 3}); initSpread(spread); }; function initSpread(spread) { var chartType = [{ type: GC.Spread.Sheets.Charts.ChartType.area, desc: "area", }, { type: GC.Spread.Sheets.Charts.ChartType.areaStacked, desc: "areaStacked", }, { type: GC.Spread.Sheets.Charts.ChartType.areaStacked100, desc: "areaStacked100", }]; var sheets = spread.sheets; spread.suspendPaint(); initArea(sheets[0], chartType[0].desc, chartType[0].type); initArea(sheets[1], chartType[1].desc, chartType[1].type); initArea(sheets[2], chartType[2].desc, chartType[2].type); spread.resumePaint(); } function initArea(sheet, sheetName, chartType) { sheet.name(sheetName); sheet.suspendPaint(); //prepare data for chart var dataArray = [ ["", "1750", "1800", "1850", "1900", "1950", "2000", "2050"], ["Asia", 502, 635, 809, 947, 1402, 3634, 5268], ["Africa", 106, 107, 111, 133, 221, 767, 1766], ["America", 18, 31, 54, 156, 339, 818, 1201], ["Europe", 163, 203, 276, 408, 547, 729, 628], ["Oceania", 2, 2, 2, 6, 13, 30, 46] ]; sheet.setArray(0, 0, dataArray); sheet.resumePaint(); var chart = sheet.charts.add((sheet.name() + 'Chart1'), chartType, 0, 120, 800, 300, "A1:H6", GC.Spread.Sheets.Charts.RowCol.rows); var series = chart.series().get(); var colorArray = ['rgba(158, 200, 242, 0.7)', 'rgba(245, 87, 31, 0.7)', 'rgba(173, 255, 131, 0.7)', 'rgba(255, 178, 50, 0.7)', 'rgba(93, 93, 93, 0.7)']; var colorLineArray = ['rgba(158, 200, 242)', 'rgba(245, 87, 31)', 'rgba(173, 255, 131)', 'rgba(255, 178, 50)', 'rgba(93, 93, 93)']; for (var i = 0; i < series.length; i++) { series[i].backColor = colorArray[i]; series[i].border.color = colorLineArray[i]; series[i].border.width = 2; chart.series().set(i, series[i]); } var axes = chart.axes(); axes.primaryValue.lineStyle.color = 'grey'; axes.primaryValue.majorTickPosition = GC.Spread.Sheets.Charts.TickMark.outside; axes.primaryValue.majorUnit = 1000; chart.axes(axes); chart.title({text:"The Continents History and Forecast of Population Growth",fontSize:18}); chart.axes({primaryValue:{title:{text:"Units: one million"}}}); }
<!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; }