web前端动态图表无法刷新数据，请教问题在哪？

Question

Apexcharts.js中的brush类型图表无法刷新数据

求教各路大神，本人最近在做一个前端开发项目，需要用一张图来展现100个数据，这100个数据是从通过ajax请求从后端接收的，每10秒轮询一次，更新100个数据。

网上找到了开源库apexcharts.js，瞬间被高大上的brush类型图所吸引，引入到我在开发的程序中（网上demo图如下）：

但是出现了下面柱状图数据刷新正常，而上面折线图无法刷新的问题，如下图所示，详细问题描述和代码也在下方，谢谢各位。

我根据示例代码和官方网站上的doc进行了修改，并移植到开发的程序中。大致原理是：打开网页——前端按10秒钟轮询方式通过ajax发送请求到后端——后端python程序生成100个数据，通过json格式返回前端——前端更新数据并刷新图表

前端跟后端交互的代码如下

    var storm_data_s6a = "";
    var strom_time_s6a = "";
    $(document).ready(function(){
       setInterval(function(){$.ajax({ 
            type:"POST", 
            url:"/sigStorm/", 
            dataType:"json",      
            contentType:"application/json",               
            data:JSON.stringify({"S6a_storm":true,"Cx_storm":true,"Rejcall":true}), 
            success:function(res){ 
                storm_data_s6a = res.S6a_storm;
                storm_time_s6a = res.storm_time;
                //alert(storm_data_s6a[15]);
                stormFigure()
            }
     })

       },100000);
      });

为了实现图表实时刷新的目的，防止重复新建插入图表，我在处理图表呈现时采用了“清空元素内容”，再“重新创建图表”的办法，代码如下：

function stormFigure()
{
    var time1 = new Date(storm_time_s6a).getTime()
    var time2 = time1 - 1200000
    var time3 = time1 - 5940000
    var data1 = generateDayWiseTimeSeries(new Date(time3).getTime(), 100, {
      min: 30,
      max: 90
    });
    var options1 = {
      chart: {
        id: "chart2",
        type: "area",
        height: 230,
        foreColor: "#ccc",
        toolbar: {
          autoSelected: "pan",
          show: false
        }
      },
      colors: ["#00BAEC"],
      stroke: {
        width: 3
      },
      grid: {
        borderColor: "#555",
        yaxis: {
          lines: {
            show: false
          }
        }
      },
      dataLabels: {
        enabled: true
      },
      fill: {
        gradient: {
          enabled: true,
          opacityFrom: 0.55,
          opacityTo: 0
        }
      },
      markers: {
        size: 5,
        colors: ["#000524"],
        strokeColor: "#00BAEC",
        strokeWidth: 3
      },
      series: [
        {
          name: "S6a_flow",
          data: data1
        }
      ],
      tooltip: {
        x:{
          show: true,
          format: 'HH:mm'
        },
        theme: "dark"
      },
      xaxis: {
        type: "datetime",
      },
      yaxis: {
        tickAmount: 10,
        min: 0,
        max: 250,
      }
    };

    $("#chart-area").empty();


    var chart1 = new ApexCharts(document.querySelector("#chart-area"), options1);

        chart1.render();



    //chart1.updateSeries([{ data: data1 }]);



    //chart1.updateOptions(null,false,false,false);



    var options2 = {
      chart: {
        id: "chart1",
        height: 130,
        type: "bar",
        foreColor: "#ccc",
        brush: {
          target: "chart2",
          enabled: true
        },
        selection: {
          fill: {
            color: "#fff",
            opacity: 0.4
          },
          xaxis: {
            min: time2,
            max: time1
          }
        }
      },
      colors: ["#FF0080"],
      series: [
        {
          name: "S6a_flow",
          data: data1
        }
      ],
      stroke: {
        width: 2
      },
      grid: {
        borderColor: "#444"
      },
      markers: {
        size: 0
      },
      xaxis: {
        type: "datetime",
        tooltip: {
          enabled: false
        }
      },
      yaxis: {
        tickAmount: 2,
        min: 0,
        max: 200
      }
    };

    $("#chart-bar").empty();

    var chart2 = new ApexCharts(document.querySelector("#chart-bar"), options2);

    chart2.render();


  }

但是在程序运行后，就出现了上面的折线图不能刷新的情况（重新打开网页可以）。下面的柱状图刷新没有问题。

可以确认的是，数据是没有问题的，我把chart2 options2中的brush.enable置为false后，折线图也可以实时刷新。但是我翻遍了官网，也未能得到brush设置的有效指导。

此问题已困扰我几天，求教各位大神和曾经使用过ApexCharts工具的大神给予指导，不胜感激~

Answer 1

换了个图表库，此问题已解决