株価チャート

株価チャートは、データの変動を図示できます。株価チャートでは、その名称が示すように株価の変動を表すだけでなく、日々の降雨量や年間気温といった、その他の変動データも表すことができます。

<p>SpreadJSでは、「高値-安値-終値」、「始値-高値-安値-終値」、「出来高-高値-安値-終値」、「出来高-始値-高値-安値-終値」の4種類の株価チャートがサポートされます。チャートの種類を取得するには、<strong>GC.Spread.Sheets.Charts.ChartType.stockHLC</strong>プロパティを使用します。</p> <p>チャートAPIを使用すると、Spreadに<strong>株価チャート(高値-安値-終値)</strong>を追加し、チャートのスタイルを変更できます。株価チャート(高値-安値-終値)を作成するには、データを高値、安値、終値としてまとめておく必要があります。終値は高値と安値の中間に表示されます。</p> <pre><code class="hljs js language-js"> <span class="hljs-keyword">var</span> chart = sheet.charts.add(<span class="hljs-string">'stockHLC'</span>, GC.Spread.Sheets.Charts.ChartType.stockHLC, <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() chart.title(title); </code></pre> <p><strong>「始値-高値-安値-終値」株価チャート</strong>は、「高値-安値-終値」チャートに<strong>始値</strong>が追加されたものです。データは始値、高値、安値、終値の順にまとめておきます。</p> <p>チャートAPIを使用すると、Spreadに<strong>株価チャート(出来高-高値-安値-終値)</strong>を追加し、チャートのスタイルを変更できます。「出来高-高値-安値-終値」株価チャートは、「高値-安値-終値」チャートに<strong>出来高</strong>が追加されたものです。データは出来高、高値、安値、終値の順にまとめておきます。出来高系列のチャートの種類は積み上げ縦棒(columnStacked)です。系列のスタイルは必要に応じて変更できます。</p> <pre><code class="hljs js language-js"> <span class="hljs-keyword">var</span> chart = sheet.charts.add(<span class="hljs-string">'stockVHLC'</span>, GC.Spread.Sheets.Charts.ChartType.stockVHLC, <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(); <span class="hljs-keyword">var</span> ser = series[<span class="hljs-number">0</span>]; <span class="hljs-keyword">var</span> ser.backColor = <span class="hljs-string">'red'</span>; chart.series().set(<span class="hljs-number">0</span>, ser); </code></pre> <p><strong>「出来高-始値-高値-安値-終値」</strong>チャートには、すべてのデータが含まれます。データは出来高、始値、高値、安値、終値の順にまとめておきます。</p>
window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {sheetCount: 4}); initSpread(spread); }; var data = dataSource; function initSpread(spread) { spread.suspendPaint(); spread.options.tabStripRatio = 0.7; var chartTypeStr = ['stockHLC', 'stockOHLC', 'stockVHLC', 'stockVOHLC']; var chartType = [{ type: GC.Spread.Sheets.Charts.ChartType.stockHLC, desc: chartTypeStr[0], }, { type: GC.Spread.Sheets.Charts.ChartType.stockOHLC, desc: chartTypeStr[1], }, { type: GC.Spread.Sheets.Charts.ChartType.stockVHLC, desc: chartTypeStr[2], }, { type: GC.Spread.Sheets.Charts.ChartType.stockVOHLC, desc: chartTypeStr[3], }]; var sheets = spread.sheets; var sheet = sheets[sheets.length - 1]; sheet.suspendPaint(); sheet.name(chartTypeStr[chartTypeStr.length - 1]); sheet.setArray(0, 0, data); sheet.getRange(0, 0, 61, 1).formatter('dd/mm/yyyy'); sheet.setColumnWidth(0, 80); sheet.resumePaint(); initStockHLCChartSheetData(sheets[0], chartTypeStr[0]); initStockOHLCChartSheetData(sheets[1], chartTypeStr[1]); initStockVHLCChartSheetData(sheets[2], chartTypeStr[2]); for (var i = 0; i < chartType.length; i++) { sheet = sheets[i]; initChart(sheet, chartType[i].type, i);//add chart } spread.resumePaint(); } function initStockHLCChartSheetData(sheet, sheetName) { sheet.name(sheetName); sheet.suspendPaint(); var formula = "='stockVOHLC'!"; for (var i = 0; i < data.length - 1; i++) { var formula1 = formula + 'A' + (i + 1); sheet.setFormula(i, 0, formula1); formula1 = formula + 'D' + (i + 1); sheet.setFormula(i, 1, formula1); formula1 = formula + 'E' + (i + 1); sheet.setFormula(i, 2, formula1); formula1 = formula + 'F' + (i + 1); sheet.setFormula(i, 3, formula1); } sheet.getRange(0, 0, 61, 1).formatter('dd/mm/yyyy'); sheet.setColumnWidth(0, 80); sheet.resumePaint(); } function initStockOHLCChartSheetData(sheet, sheetName) { sheet.name(sheetName); sheet.suspendPaint(); var formula = "='stockVOHLC'!"; for (var i = 0; i < data.length - 1; i++) { var formula1 = formula + 'A' + (i + 1); sheet.setFormula(i, 0, formula1); formula1 = formula + 'C' + (i + 1); sheet.setFormula(i, 1, formula1); formula1 = formula + 'D' + (i + 1); sheet.setFormula(i, 2, formula1); formula1 = formula + 'E' + (i + 1); sheet.setFormula(i, 3, formula1); formula1 = formula + 'F' + (i + 1); sheet.setFormula(i, 4, formula1); } sheet.getRange(0, 0, 61, 1).formatter('dd/mm/yyyy'); sheet.setColumnWidth(0, 80); sheet.resumePaint(); } function initStockVHLCChartSheetData(sheet, sheetName) { sheet.name(sheetName); sheet.suspendPaint(); var formula = "='stockVOHLC'!"; for (var i = 0; i < data.length - 1; i++) { var formula1 = formula + 'A' + (i + 1); sheet.setFormula(i, 0, formula1); formula1 = formula + 'B' + (i + 1); sheet.setFormula(i, 1, formula1); formula1 = formula + 'D' + (i + 1); sheet.setFormula(i, 2, formula1); formula1 = formula + 'E' + (i + 1); sheet.setFormula(i, 3, formula1); formula1 = formula + 'f' + (i + 1); sheet.setFormula(i, 4, formula1); } sheet.getRange(0, 0, 61, 1).formatter('dd/mm/yyyy'); sheet.setColumnWidth(0, 80); sheet.resumePaint(); } function initChart(sheet, chartType, index) { sheet.suspendPaint(); var rangeIndex = ['A1:D61', 'A1:E61', 'A1:E61', 'A1:F61']; //add chart var chart = sheet.charts.add('Chart1', chartType, 270, 60, 615, 270, rangeIndex[index]); sheet.resumePaint(); }
<!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="$DEMOROOT$/spread/source/data/stockChartData.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; }