股票图

股票图表可以显示数据的波动,就像名字所表达的那样,股票图表可以代表股票的波动,每天的降雨量,或者年的温度等等。

Spread.Sheets支持High-Low-Close, Open-High-Low-Close, Volume-High-Low-Close 和 Volume-Open-High-Low-Close 图表类型. 用GC.Spread.Sheets.Charts.ChartType.stockHLC去获取图表类型。 插入一个High-Low-Close图表,你可以通过图表支持的接口去修改图表的样式。 这个stockHLC图表需要的数据必须是这样的排序高点数据, 低点数据和收盘数据,而且这个高点数据必须大于低点数据,收盘数据在这两者之间。 这个Open-High-Low-Close图表需要在stockHLC的基础上加一个开盘数据,而且数据的顺序是开盘数据,高点数据,低点数据,收盘数据。 插入一个Volume-High-Low-Close图表, 你可以通过图表支持的接口去修改图表的样式。 stockVHLC图表需要去增加成交量数据在数据源里面,而且这些数据的顺序是成交量、高点数据、低点数据、收盘数据、而且交易量系列的图标类型是柱状堆积图,你可以更改这个系列的样式就像更改柱状堆积图一样。 这个Volume-Open-High-Low-Close图表需要添加所有的数据源,而且顺序是成交量数据、开盘数据、高点数据、低点数据、和收盘数据。
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="zh-cn" /> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/zh/purejs/node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity/spread-sheets-charts/dist/gc.spread.sheets.charts.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity/spread-sheets-resources-zh/dist/gc.spread.sheets.resources.zh.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; }