Apexcharts 市场深度图表问题
Apexcharts Market depth chart issue
我决定使用 apexcharts 软件创建市场深度图表。我想我做对了,但是我在 chrome 和 firefox 中得到了不同的结果。
我创建了一个 codepen 示例,它在各自的浏览器中重现了结果。
https://codepen.io/teamfresh/pen/jOVjjWV
我的问题是虽然在 firefox 中正确显示...
firefox depth chart
chrome 浏览器不考虑第二个数据系列的 x 值,将第二个系列与第一个系列重叠,而不是并排显示。
chrome depth chart
有没有其他人遇到过这个问题或者可以找出解决方法?如果有任何帮助,我将不胜感激!
图表代码如下...
var options = {
series: [{
name: "Buy",
data: [
{"x":479,"y":5840},
{"x":480,"y":4840},
{"x":486,"y":3840},
{"x":490,"y":3440},
{"x":491,"y":3240},
{"x":492,"y":2740},
{"x":493,"y":1740},
{"x":494,"y":1440},
{"x":496,"y":1140},
{"x":497,"y":340},
{"x":498,"y":190},
{"x":499,"y":170},
{"x":500,"y":100}]
},{
name: "Sell",
data: [
{"x":501,"y":9},
{"x":502,"y":184},
{"x":503,"y":1184},
{"x":504,"y":1909},
{"x":510,"y":2009},
{"x":511,"y":2459},
{"x":513,"y":3809},
{"x":514,"y":4109},
{"x":517,"y":5109},
{"x":520,"y":6109}]
}],
chart: {
height: 350,
type: 'line'
},
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
ApexCharts uses null values 缺少数据,因此您应该这样修改系列:
var options = {
series: [
{
name: "Buy",
data: [
{"x":479,"y":5840},
{"x":480,"y":4840},
{"x":486,"y":3840},
{"x":490,"y":3440},
{"x":491,"y":3240},
{"x":492,"y":2740},
{"x":493,"y":1740},
{"x":494,"y":1440},
{"x":496,"y":1140},
{"x":497,"y":340},
{"x":498,"y":190},
{"x":499,"y":170},
{"x":500,"y":100},
{"x":501,"y":null},
{"x":502,"y":null},
{"x":503,"y":null},
{"x":504,"y":null},
{"x":510,"y":null},
{"x":511,"y":null},
{"x":513,"y":null},
{"x":514,"y":null},
{"x":517,"y":null},
{"x":520,"y":null}
]
},{
name: "Sell",
data: [
{"x":479,"y":null},
{"x":480,"y":null},
{"x":486,"y":null},
{"x":490,"y":null},
{"x":491,"y":null},
{"x":492,"y":null},
{"x":493,"y":null},
{"x":494,"y":null},
{"x":496,"y":null},
{"x":497,"y":null},
{"x":498,"y":null},
{"x":499,"y":null},
{"x":500,"y":null},
{"x":501,"y":9},
{"x":502,"y":184},
{"x":503,"y":1184},
{"x":504,"y":1909},
{"x":510,"y":2009},
{"x":511,"y":2459},
{"x":513,"y":3809},
{"x":514,"y":4109},
{"x":517,"y":5109},
{"x":520,"y":6109}
]
}
],
chart: {
height: 350,
type: 'line'
},
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
我决定使用 apexcharts 软件创建市场深度图表。我想我做对了,但是我在 chrome 和 firefox 中得到了不同的结果。 我创建了一个 codepen 示例,它在各自的浏览器中重现了结果。
https://codepen.io/teamfresh/pen/jOVjjWV
我的问题是虽然在 firefox 中正确显示...
firefox depth chart
chrome 浏览器不考虑第二个数据系列的 x 值,将第二个系列与第一个系列重叠,而不是并排显示。
chrome depth chart
有没有其他人遇到过这个问题或者可以找出解决方法?如果有任何帮助,我将不胜感激!
图表代码如下...
var options = {
series: [{
name: "Buy",
data: [
{"x":479,"y":5840},
{"x":480,"y":4840},
{"x":486,"y":3840},
{"x":490,"y":3440},
{"x":491,"y":3240},
{"x":492,"y":2740},
{"x":493,"y":1740},
{"x":494,"y":1440},
{"x":496,"y":1140},
{"x":497,"y":340},
{"x":498,"y":190},
{"x":499,"y":170},
{"x":500,"y":100}]
},{
name: "Sell",
data: [
{"x":501,"y":9},
{"x":502,"y":184},
{"x":503,"y":1184},
{"x":504,"y":1909},
{"x":510,"y":2009},
{"x":511,"y":2459},
{"x":513,"y":3809},
{"x":514,"y":4109},
{"x":517,"y":5109},
{"x":520,"y":6109}]
}],
chart: {
height: 350,
type: 'line'
},
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
ApexCharts uses null values 缺少数据,因此您应该这样修改系列:
var options = {
series: [
{
name: "Buy",
data: [
{"x":479,"y":5840},
{"x":480,"y":4840},
{"x":486,"y":3840},
{"x":490,"y":3440},
{"x":491,"y":3240},
{"x":492,"y":2740},
{"x":493,"y":1740},
{"x":494,"y":1440},
{"x":496,"y":1140},
{"x":497,"y":340},
{"x":498,"y":190},
{"x":499,"y":170},
{"x":500,"y":100},
{"x":501,"y":null},
{"x":502,"y":null},
{"x":503,"y":null},
{"x":504,"y":null},
{"x":510,"y":null},
{"x":511,"y":null},
{"x":513,"y":null},
{"x":514,"y":null},
{"x":517,"y":null},
{"x":520,"y":null}
]
},{
name: "Sell",
data: [
{"x":479,"y":null},
{"x":480,"y":null},
{"x":486,"y":null},
{"x":490,"y":null},
{"x":491,"y":null},
{"x":492,"y":null},
{"x":493,"y":null},
{"x":494,"y":null},
{"x":496,"y":null},
{"x":497,"y":null},
{"x":498,"y":null},
{"x":499,"y":null},
{"x":500,"y":null},
{"x":501,"y":9},
{"x":502,"y":184},
{"x":503,"y":1184},
{"x":504,"y":1909},
{"x":510,"y":2009},
{"x":511,"y":2459},
{"x":513,"y":3809},
{"x":514,"y":4109},
{"x":517,"y":5109},
{"x":520,"y":6109}
]
}
],
chart: {
height: 350,
type: 'line'
},
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();