Apexcharts 市场深度图表问题

问题描述

我决定使用 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,{"x":503,{"x":504,{"x":510,{"x":511,{"x":513,{"x":514,{"x":517,{"x":520,"y":null}
            ]
        },{
            name: "Sell","y":9},"y":184},"y":1184},"y":1909},"y":2009},"y":2459},"y":3809},"y":4109},"y":5109},"y":6109}
            ]
        }
    ],chart: {
      height: 350,type: 'line'
    },};
var chart = new ApexCharts(document.querySelector("#chart"),options);
chart.render();