Apexcharts市场深度图问题

Question

我决定使用apexcharts软件创建一个市场深度图。我认为我是对的，但我在chrome和firefox中得到了不同的结果。我创建了一个代码笔示例，它在各个浏览器中重现结果。

https://codepen.io/teamfresh/pen/jOVjjWV

我的问题是，在firefox中正确显示。。。

firefox深度图

chrome浏览器不尊重第二个数据系列的x值，并将第二个系列与第一个系列重叠，而不是并排显示。

铬深度图

其他人有没有遇到过这个问题，或者能想出如何解决这个问题吗？如果有任何帮助，我将不胜感激！

图表的代码如下。。。

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();

Answer 1

ApexCharts为丢失的数据使用空值，因此您应该这样修改序列：

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();