Esta es una simple muestra de cómo la plataforma puede mostrar varias gráficas al mismo tiempo. Los métodos específicos se pueden consultar en la sección de gráficos de la documentación APIhttps://www.fmz.com/api#chart
/*backtest
start: 2019-01-22 00:00:00
end: 2019-01-23 00:00:00
period: 30m
exchanges: [{"eid":"OKCoin_EN","currency":"BTC_USD"}]
*/
function main() {
var cfgA = {
extension: {
layout: 'single', // 不参于分组，单独显示, 默认为分组 'group'
height: 300, // 指定高度
},
title: {
text: '盘口图表'
},
xAxis: {
type: 'datetime'
},
series: [{
name: '买一',
data: [],
}, {
name: '卖一',
data: [],
}]
}
var cfgB = {
title: {
text: '差价图'
},
xAxis: {
type: 'datetime'
},
series: [{
name: '差价',
type: 'column',
data: [],
}]
}
var cfgC = {
__isStock: false,
title: {
text: '饼图'
},
series: [{
type: 'pie',
name: 'one',
data: [
["A", 25],
["B", 25],
["C", 25],
["D", 25],
] // 指定初始数据后不需要用add函数更新, 直接更改图表配置就可以更新序列.
}]
};
var cfgD = {
extension: {
layout: 'single',
col: 8, // 指定宽度占的单元值, 总值 为12
height: '300px',
},
title: {
text: '盘口图表'
},
xAxis: {
type: 'datetime'
},
series: [{
name: '买一',
data: [],
}, {
name: '卖一',
data: [],
}]
}
var cfgE = {
__isStock: false,
extension: {
layout: 'single',
col: 4,
height: '300px',
},
title: {
text: '饼图2'
},
series: [{
type: 'pie',
name: 'one',
data: [
["A", 25],
["B", 25],
["C", 25],
["D", 25],
]
}]
};
var chart = Chart([cfgA, cfgB, cfgC, cfgD, cfgE]);
chart.reset()
// 为饼图清加一个数点，add只能更新通过add方式添加的数据点, 内置的数据点无法后期更新
chart.add(3, {
name: "ZZ",
y: Math.random() * 100
});
while (true) {
Sleep(1000)
var ticker = exchange.GetTicker()
if (!ticker) {
continue;
}
var diff = ticker.Sell - ticker.Buy
cfgA.subtitle = {
text: '买一 ' + ticker.Buy + ', 卖一 ' + ticker.Sell,
};
cfgB.subtitle = {
text: '价差 ' + diff,
};
chart.add([0, [new Date().getTime(), ticker.Buy]]);
chart.add([1, [new Date().getTime(), ticker.Sell]]);
// 相当于更新第二个图表的第一个数据序列
chart.add([2, [new Date().getTime(), diff]]);
chart.add(4, [new Date().getTime(), ticker.Buy]);
chart.add(5, [new Date().getTime(), ticker.Buy]);
cfgC.series[0].data[0][1] = Math.random() * 100;
cfgE.series[0].data[0][1] = Math.random() * 100;
// update实际上等于重置了图表的配置
chart.update([cfgA, cfgB, cfgC, cfgD, cfgE]);
}
}
JXC6698En el parámetro chart.add, el primer parámetro de la matriz es el número de serie de cfgA, cfgB, cfgC, ¿verdad?
No hay nadaLa documentación de la API tiene detalles: soporte para mostrar múltiples gráficos, al configurar basta con ingresar parámetros de la matriz: var chart = Chart (([{...}, {...}, {...}]), por ejemplo, el gráfico uno tiene dos series, el gráfico dos tiene una serie, el gráfico tres tiene una serie, entonces al agregar especifique que el ID de la serie 0 y 1 representa los datos de las dos series de la tabla 1, al agregar especifique que el ID de la serie 2 indica los datos de la primera serie de la tabla 2, y la serie 3 indica los datos de la primera serie de la tabla 3.