股票图

股票图广泛用于说明数据的波动。 它可以表示库存，每日降雨量或年度温度的波动。 通常，此图表非常适合分析财务数据和可视化库存信息。

表单的列或行中排列的数据可以在股票图中绘制。

SpreadJS支持以下类型的股票图表。 在下面显示的示例中，借助于不同类型的股票图表描述了在不同时间间隔的市场数据分析。

• High-Low-Close high-low-close图显示按以下顺序组织的数据值：1）高，2）低，3）收盘，收盘价介于高和低之间。 high-low-close图的图像如下所示：
• Open-High-Low-Close open-high-low-close图显示按以下顺序组织的数据值：1）打开，2）高，3）低然后4）关闭。 open-high-low-close图的图像如下所示：
• Volume-High-Low-Close Volume-High-Low-Close图显示了按以下顺序组织的数据值：1）成交量，2）高，3）低然后4）收盘。 Volume-High-Low-Close图的图像如下所示：
• Volume- Open-High-Low-Close Volume-Open-High-Low-Close图显示了按以下顺序组织的数据值：1）成交量，2）打开，3）高点，4）低点然后5）闭合。 Volume-Open-High-Low-Close图的图像如下所示：

示例代码

此代码显示如何在表单中添加不同类型的股票图表。

Click here to see code.
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 = SpreadJS;
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'];
//添加图表
var chart = sheet.charts.add('Chart1', chartType, 270, 60, 615, 270, rangeIndex[index]);


sheet.resumePaint();
}