Блог

Я решил создать диаграмму глубины рынка с помощью программного обеспечения apexcharts. Я думаю, что у меня все правильно, но я получаю разные результаты в Chrome и Firefox. Я создал пример codepen, который воспроизводит результаты в соответствующих браузерах.

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

моя проблема в том, что при правильном отображении в Firefox…

диаграмма глубины firefox

браузер Chrome не учитывает значение x второго ряда данных и перекрывает второй ряд с первым рядом вместо того, чтобы показывать их рядом.

диаграмма глубины chrome

у кого-нибудь еще была эта проблема или вы можете выяснить, как устранить проблему? Я был бы очень благодарен за любую помощь!

код для диаграммы выглядит следующим образом…

 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 использует нулевые значения для отсутствующих данных, поэтому вам следует изменить ряд таким образом:

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