折れ線グラフ

折れ線グラフには、ワークシートの列または行ごとにまとめたデータをプロットできます。折れ線グラフでは、カテゴリデータは水平軸上に等間隔に配置され、すべての値データは垂直軸上に等間隔に分布します。折れ線グラフは、時間の経過に伴う連続データの変化を、等間隔に目盛を付けた軸上で視覚化します。このチャートは、月ごと、四半期ごと、会計年度ごとなど、一定の間隔でデータの傾向を分析するような場合に適します。

<p>SpreadJSでは、折れ線、積み上げ折れ線、100%積み上げ折れ線、マーカー付き折れ線、マーカー付き積み上げ折れ線、およびマーカー付き100%積み上げ折れ線がサポートされます。チャートの種類を取得するには、<strong>GC.Spread.Sheets.Charts.ChartType.line</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.line, <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> legend = chart.legend(); legend.visible = <span class="hljs-literal">true</span>; chart.legend(legend); </code></pre> <p>折れ線グラフは、通常の積み上げグラフ、または100%積み上げグラフに設定できます。</p> <p>データポイントには、色、形状、境界線をカスタマイズしたマーカーを付けることもできます。</p> <pre><code class="hljs js language-js"> <span class="hljs-keyword">var</span> seriesItem = chart.series().get(index ?); bobSeries.symbol.shape = <span class="hljs-number">1</span> <span class="hljs-comment">/** dash */</span>; bobSeries.symbol.size = <span class="hljs-number">20</span>; bobSeries.symbol.fill = <span class="hljs-string">"red"</span>; bobSeries.symbol.border.size = <span class="hljs-number">2</span>; bobSeries.symbol.border.color = <span class="hljs-string">"rgb(127, 0, 127)"</span>; bobSeries.symbol.border.lineType = <span class="hljs-number">7</span> <span class="hljs-comment">/** sysDot */</span>; series.set(index ?, seriesItem); </code></pre> <p><strong>折れ線、マーカー付き折れ線:</strong>マーカーを付けて個々のデータ値を識別することも、マーカーのない折れ線として表示することもできます。折れ線グラフは、時間の経過に伴うデータの傾向を、等間隔に配置したカテゴリ上に表すことができます。特に、多数のデータポイントが含まれる場合や、データの表示順が重要な意味を持つ場合に有効です。カテゴリ数が多い場合や、値が概数である場合には、マーカーを表示しない折れ線グラフのほうが適します。</p> <p><strong>積み上げ折れ線、マーカー付き積み上げ折れ線:</strong>積み上げ折れ線グラフは、時間の経過に伴う、または等間隔に配置したカテゴリに基づく、全体に対する個々の値の貢献度の傾向を示します。</p> <p><strong>100%積み上げ折れ線、マーカー付き100%積み上げ折れ線:</strong>100%積み上げ折れ線は、時間の経過に伴う、または等間隔に配置したカテゴリに基づく、全体に対する個々の値の貢献度の傾向を百分率(%)で示します。カテゴリ数が多い場合や、値が概数である場合には、マーカーを表示しない100%積み上げ折れ線のほうが適します。</p>
window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {sheetCount: 6}); initSpread(spread); }; function initSpread(spread) { var chartType = [{ type: GC.Spread.Sheets.Charts.ChartType.line, desc: "line", }, { type: GC.Spread.Sheets.Charts.ChartType.lineStacked, desc: "lineStacked", }, { type: GC.Spread.Sheets.Charts.ChartType.lineStacked100, desc: "lineStacked100", }, { type: GC.Spread.Sheets.Charts.ChartType.lineMarkers, desc: "lineMarkers", withMarker: true, }, { type: GC.Spread.Sheets.Charts.ChartType.lineMarkersStacked, desc: "lineMarkersStacked", withMarker: true, }, { type: GC.Spread.Sheets.Charts.ChartType.lineMarkersStacked100, desc: "lineMarkersStacked100", withMarker: true, }]; spread.suspendPaint(); var sheets = spread.sheets; for (var i = 0; i < chartType.length; i++) { var sheet = sheets[i]; initSheet(sheet, chartType[i].desc); initChart(sheet, chartType[i].type, chartType[i].withMarker);//add chart } spread.options.tabStripRatio = 0.8; spread.resumePaint(); } function initSheet(sheet, sheetName) { sheet.name(sheetName); //prepare data for chart var dataArray = [ ["", '2012', '2013', '2014', '2015', '2016', '2017'], ["Chrome", 0.3782, 0.4663, 0.4966, 0.5689, 0.6230, 0.6360], ["FireFox", 0.2284, 0.2030, 0.1801, 0.1560, 0.1531, 0.1304], ["IE", 0.3214, 0.2491, 0.2455, 0.1652, 0.1073, 0.0834], ]; sheet.setArray(0, 0, dataArray); } function initChart(sheet, chartType, marker) { //add chart var chart = sheet.charts.add((sheet.name() + 'Chart1'), chartType, 30, 85, 800, 350, "A1:H4", GC.Spread.Sheets.Charts.RowCol.rows); changeChartLegend(chart); changeChartArea(chart); changChartDataLabels(chart); changeGridLines(chart); changeLineStyle(chart); changeChartAxes(chart); changeChartTitle(chart); if (marker) { changeMarker(chart); } } function changeChartTitle(chart) { var title = chart.title(); title.text = "Browser Market Share"; title.fontSize = 18; chart.title(title); } //change legend position function changeChartLegend(chart) { var legend = chart.legend(); legend.visible = true; var legendPosition = GC.Spread.Sheets.Charts.LegendPosition; legend.position = legendPosition.bottom; chart.legend(legend); } //change backColor function changeChartArea(chart) { var chartArea = chart.chartArea(); chartArea.fontSize = 14; chart.chartArea(chartArea); } // show dataLabels function changChartDataLabels(chart) { var dataLabels = chart.dataLabels(); dataLabels.showValue = true; dataLabels.showSeriesName = false; dataLabels.showCategoryName = false; dataLabels.format = "0%"; var dataLabelPosition = GC.Spread.Sheets.Charts.DataLabelPosition; dataLabels.position = dataLabelPosition.above; chart.dataLabels(dataLabels); } // hide gridLines function changeGridLines(chart) { var gridLinesAxes = chart.axes(); gridLinesAxes.primaryValue.min = null; chart.axes(gridLinesAxes); } //change legend position function changeChartAxes(chart) { chart.axes({primaryValue:{format:"0%"}}); } // change line style function changeLineStyle(chart) { var series = chart.series().get(); var seriesItem; for (var i = 0; i < series.length; i++) { seriesItem = series[i]; seriesItem.border.width = 2; chart.series().set(i, seriesItem); } } // change Marker function changeMarker(chart) { var preSet = [ { fill: "", shape: 0 /** circle */, size: 7, border: { color: "blue", width: 1 } }, { fill: "", shape: 8/** star */, size: 9, border: { color: "black", width: 1 } }, { fill: "yellow", shape: 2 /** diamond */, size: 7, border: { color: "red", width: 2 } }, ]; var series = chart.series().get(); var seriesItem; for (var i = 0; i < series.length; i++) { seriesItem = series[i]; seriesItem.symbol = preSet[i]; chart.series().set(i, seriesItem); } }
<!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; }