Apexcharts 市场深度图表问题

Question

我决定使用 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();

Answer 1

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