股票图 | 功能示例 | SpreadJS 在线示例

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图表需要添加所有的数据源，而且顺序是成交量数据、开盘数据、高点数据、低点数据、和收盘数据。

<template>
<div class="sample-tutorial">
<gc-spread-sheets class="sample-spreadsheets" @workbookInitialized="initSpread">
<gc-worksheet />
<gc-worksheet />
<gc-worksheet />
<gc-worksheet />
</gc-spread-sheets>
</div>
</template>
<script setup>
import GC from "@grapecity-software/spread-sheets";
import {
ref
} from "vue";
import "@grapecity-software/spread-sheets-vue";
import "@grapecity-software/spread-sheets-charts";
import '@grapecity-software/spread-sheets-resources-zh';
GC.Spread.Common.CultureManager.culture("zh-cn");
import {
getData
} from './data.js';
const spreadRef = ref(null);
const data = getData();
function initSpread(spread) {
spreadRef.value = spread;
spread.suspendPaint();
spread.options.tabStripRatio = 0.7;
let chartTypeStr = ['stockHLC', 'stockOHLC', 'stockVHLC', 'stockVOHLC'];
let 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],
}];
let sheets = spread.sheets;
let 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 (let 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();
let formula = "='stockVOHLC'!";
for (let i = 0; i < data.length - 1; i++) {
let 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();
let formula = "='stockVOHLC'!";
for (let i = 0; i < data.length - 1; i++) {
let 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();
let formula = "='stockVOHLC'!";
for (let i = 0; i < data.length - 1; i++) {
let 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();
let rangeIndex = ['A1:D61', 'A1:E61', 'A1:E61', 'A1:F61'];
//add chart
sheet.charts.add('Chart1', chartType, 270, 60, 615, 270, rangeIndex[index]);
sheet.resumePaint();
}
</script>
<style scoped>
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.sample-spreadsheets {
width: 100%;
height: 100%;
overflow: hidden;
float: left;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#app {
height: 100%;
}
</style>

<!DOCTYPE html>
<html style="height:100%;font-size:14px;">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>SpreadJS VUE</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css"
href="$DEMOROOT$/zh/vue3/node_modules/@grapecity-software/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/zh/vue3/node_modules/systemjs/dist/system.src.js"></script>
<script src="./systemjs.config.js"></script>
<script src="https://cdn.grapecity.com.cn/online/resources/compiler-sfc.esm-browser.js" type="module" defer></script>
<script>
var System = SystemJS;
System.import("./src/app.js");
System.import('$DEMOROOT$/zh/lib/vue3/license.js');
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>

export function getData() {
return [["Date", "Volume", "Open", "High", "Low", "Close"],
[new Date("2008-08-31"), 46085, 17587.94, 17592.76, 17482.76, 17577.94],
[new Date("2008-09-01"), 40314, 17508.94, 17538.76, 17400.76, 17518.94],
[new Date("2008-09-02"), 45308, 17551.94, 17584.76, 17517.76, 17554.94],
[new Date("2008-09-03"), 53401, 17600.94, 17698.76, 17428.76, 17618.94],
[new Date("2008-09-04"), 57500, 17748.94, 17786.76, 17623.76, 17718.94],
[new Date("2008-09-05"), 43756, 17712.94, 17754.71, 17600.76, 17718.94],
[new Date("2008-09-06"), 55737, 17686.94, 17797.76, 17647.76, 17718.94],
[new Date("2008-09-07"), 61668, 17858.94, 17867.76, 17657.76, 17818.94],
[new Date("2008-09-08"), 47815, 17748.94, 17832.76, 17721.76, 17778.94],
[new Date("2008-09-09"), 45085, 17748.94, 17795.76, 17639.76, 17688.94],
[new Date("2008-09-10"), 42314, 17661.94, 17768.76, 17530.76, 17638.94],
[new Date("2008-09-11"), 35308, 17545.94, 17798.76, 17511.76, 17518.94],
[new Date("2008-09-12"), 51401, 17698.94, 17722.76, 17541.76, 17598.94],
[new Date("2008-09-13"), 55500, 17699.94, 17788.76, 17591.76, 17668.94],
[new Date("2008-09-14"), 43756, 17576.94, 17662.76, 17455.76, 17566.94],
[new Date("2008-09-15"), 47737, 17655.94, 17692.76, 17493.76, 17608.94],
[new Date("2008-09-16"), 45668, 17512.94, 17588.76, 17494.76, 17518.94],
[new Date("2008-09-17"), 47815, 17548.94, 17584.76, 17482.76, 17555.94],
[new Date("2008-09-18"), 57232, 17671.94, 17698.76, 17389.76, 17658.94],
[new Date("2008-09-19"), 46085, 17600.94, 17608.76, 17419.76, 17558.94],
[new Date("2008-09-20"), 42314, 17698.94, 17722.76, 17555.76, 17598.94],
[new Date("2008-09-21"), 45308, 17690.94, 17727.76, 17649.76, 17681.94],
[new Date("2008-09-22"), 53401, 17838.94, 17954.76, 17619.76, 17758.94],
[new Date("2008-09-23"), 60500, 17938.94, 17982.76, 17773.76, 17888.94],
[new Date("2008-09-24"), 53756, 17780.94, 17965.76, 17737.76, 17818.94],
[new Date("2008-09-25"), 55737, 17818.94, 17862.76, 17701.76, 17778.94],
[new Date("2008-09-26"), 45668, 17748.94, 17916.76, 17656.76, 17778.94],
[new Date("2008-09-27"), 49815, 17698.94, 17928.76, 17601.76, 17778.94],
[new Date("2008-09-28"), 46085, 17690.94, 17798.76, 17569.76, 17688.94],
[new Date("2008-09-29"), 42314, 17681.94, 17662.76, 17488.76, 17638.94],
[new Date("2008-09-30"), 45308, 17454.94, 17499.76, 17411.76, 17444.94],
[new Date("2008-10-01"), 43401, 17428.94, 17538.76, 17362.76, 17458.94],
[new Date("2008-10-02"), 47500, 17500.94, 17592.76, 17476.76, 17518.94],
[new Date("2008-10-03"), 51756, 17608.94, 17711.76, 17576.76, 17618.94],
[new Date("2008-10-04"), 55737, 17676.94, 17832.76, 17566.76, 17666.94],
[new Date("2008-10-05"), 45668, 17677.94, 17772.76, 17567.76, 17678.94],
[new Date("2008-10-06"), 47815, 17545.94, 17867.76, 17508.76, 17570.94],
[new Date("2008-10-07"), 46085, 17556.94, 17674.76, 17467.76, 17518.94],
[new Date("2008-10-08"), 42314, 17554.94, 17692.76, 17410.76, 17554.94],
[new Date("2008-10-09"), 45308, 17611.94, 17644.76, 17300.76, 17568.94],
[new Date("2008-10-10"), 53401, 17328.94, 17424.76, 17261.76, 17368.94],
[new Date("2008-10-11"), 57500, 17423.94, 17488.76, 17292.76, 17444.94],
[new Date("2008-10-12"), 43756, 17538.94, 17572.76, 17412.76, 17438.94],
[new Date("2008-10-13"), 55737, 17428.94, 17429.76, 17308.76, 17368.94],
[new Date("2008-10-14"), 45668, 17461.94, 17481.76, 17374.76, 17401.94],
[new Date("2008-10-15"), 47815, 17500.94, 17672.76, 17367.76, 17518.94],
[new Date("2008-10-16"), 46085, 17530.94, 17744.76, 17487.76, 17570.94],
[new Date("2008-10-17"), 42314, 17468.94, 17524.76, 17341.76, 17368.94],
[new Date("2008-10-18"), 45308, 17434.94, 17488.76, 17292.76, 17444.94],
[new Date("2008-10-19"), 61401, 17578.94, 17592.76, 17442.76, 17478.94],
[new Date("2008-10-20"), 53500, 17418.94, 17429.76, 17358.76, 17378.94],
[new Date("2008-10-21"), 36756, 17456.94, 17481.76, 17314.76, 17401.94],
[new Date("2008-10-22"), 55737, 17330.94, 17512.76, 17227.76, 17300.94],
[new Date("2008-10-23"), 45668, 17262.94, 17380.76, 17237.76, 17270.94],
[new Date("2008-10-24"), 47815, 17448.94, 17479.76, 17312.76, 17438.94],
[new Date("2008-10-25"), 40085, 17345.94, 17429.76, 17205.76, 17398.94],
[new Date("2008-10-26"), 34314, 17321.94, 17421.76, 17277.76, 17371.94],
[new Date("2008-10-27"), 45308, 17411.94, 17422.76, 17357.76, 17400.94],
[new Date("2008-10-28"), 53401, 17250.94, 17454.76, 17227.76, 17270.94],
[new Date("2008-10-29"), 57500, 17468.94, 17654.76, 17251.76, 17368.94],
[new Date("2008-10-30"), 33756, 17544.94, 17548.76, 17232.76, 17444.94]]
};

(function (global) {
SystemJS.config({
transpiler: 'plugin-babel',
babelOptions: {
es2015: true
},
paths: {
// paths serve as alias
'npm:': 'node_modules/',
'cdn:': 'https://cdn.grapecity.com.cn/SpreadJS/package-contents/18.2.0/'
},
packageConfigPaths: [
'./node_modules/*/package.json',
"./node_modules/@grapecity-software/*/package.json",
"./node_modules/@babel/*/package.json",
"./node_modules/@vue/*/package.json"
],
map: {
'vue': "npm:vue/dist/vue.esm-browser.js",
'tiny-emitter': 'npm:tiny-emitter/index.js',
'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js',
"systemjs-babel-build": "npm:systemjs-plugin-babel/systemjs-babel-browser.js",
'@grapecity-software/spread-sheets': 'cdn:spread-sheets/index.js',
'@grapecity-software/spread-sheets-resources-zh': 'cdn:spread-sheets-resources-zh/index.js',
'@grapecity-software/spread-sheets-vue': 'cdn:spread-sheets-vue/index.js',
'@grapecity-software/spread-sheets-shapes': 'cdn:spread-sheets-shapes/index.js',
'@grapecity-software/spread-sheets-charts': 'cdn:spread-sheets-charts/index.js',
},
meta: {
'*.css': { loader: 'systemjs-plugin-css' },
'*.vue': { loader: "../plugin-vue/index.js" }
}
});
})(this);