如何获取Apex面积图鼠标框选的时间范围及对应数据？

需求描述 #

我需要创建一个支持鼠标框选（mousedraw）时间范围的Apex Charts面积图，现有示例已实现框选功能，但需要获取选中的时间范围及对应数据，计算后将结果写入div标签。

实现方案 #

关键步骤 #

1. 启用鼠标框选功能
   在图表配置的chart.zoom中开启鼠标框选，指定框选类型为鼠标拖动：

   zoom: {
     enabled: true,
     type: 'mouse',
     autoScaleYaxis: false
   }
   

2. 监听选区事件
   通过图表的events.selection事件捕获用户框选的时间范围，该事件会返回包含选中x轴起止时间戳的参数。

3. 筛选对应数据
   利用捕获到的时间戳范围，遍历原始数据筛选出落在该范围内的数据点。

4. 计算并展示结果
   对筛选后的数据进行自定义计算（如求和、平均值等），将结果和时间范围信息写入指定div。

修改后的完整代码 #

<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<div id="chart">
    <div class="toolbar">
      <button id="one_month">Heute</button>
      <button id="Letzter Tag">Gestern</button>
      <button id="one_year" class="active">letzte Woche</button>
      <button id="ytd">Dieser Monat</button>
      <button id="all">letztes Halbjahr</button>
    </div>
    <!-- 结果展示容器 -->
    <div id="selection-result" style="margin:10px 0;padding:10px;background:#f5f5f5;"></div>
    <div id="chart-timeline"></div>
  </div>
<script>
    // 提取原始数据为独立变量，方便后续筛选
    const rawData = [
      [1671578047000,0.073 ],
      [1671578947000,0.037 ],
      [1671579847000,0.049 ]
    ];

    var options = {
        series: [{
          name: 'Energiekonsum',
          data: rawData
        }],
        chart: {
          id: 'area-datetime',
          type: 'area',
          height: 350,
          zoom: {
            enabled: true,
            type: 'mouse',
            autoScaleYaxis: false
          },
          events: {
            // 监听框选完成事件
            selection: function(event) {
              const { xaxis } = event;
              if (!xaxis) return;

              // 获取选中的时间戳范围
              const startTime = xaxis.min;
              const endTime = xaxis.max;

              // 转换为可读日期格式
              const startDate = new Date(startTime).toLocaleString();
              const endDate = new Date(endTime).toLocaleString();

              // 筛选范围内的数据
              const selectedData = rawData.filter(item => {
                const itemTime = item[0];
                return itemTime >= startTime && itemTime <= endTime;
              });

              // 自定义计算示例：求和能耗值
              const totalConsumption = selectedData.reduce((sum, item) => sum + item[1], 0).toFixed(3);

              // 将结果写入展示容器
              document.getElementById('selection-result').innerHTML = `
                <p>选中时间范围：${startDate} 至 ${endDate}</p>
                <p>选中数据点数：${selectedData.length}</p>
                <p>总能耗：${totalConsumption} 单位</p>
              `;
            }
          }
        },
        annotations: {
          yaxis: [{
            y: 30,
            borderColor: '#999',
            label: {
              show: true,
              text: 'Durchschnittsverbrauch',
              style: { color: "#fff", background: '#00E396' }
            }
          }],
          xaxis: [{
            x: new Date('14 Nov 2012').getTime(),
            borderColor: '#999',
            yAxisIndex: 0,
            label: {
              show: true,
              text: 'Rally',
              style: { color: "#fff", background: '#775DD0' }
            }
          }]
        },
        dataLabels: { enabled: false },
        markers: { size: 0, style: 'hollow' },
        xaxis: {
          type: 'datetime',
          min: new Date('01 Mar 2012').getTime(),
          tickAmount: 6
        },
        tooltip: { x: { format: 'dd MMM yyyy' } },
        fill: {
          type: 'gradient',
          gradient: {
            shadeIntensity: 1,
            opacityFrom: 0.7,
            opacityTo: 0.9,
            stops: [0, 100]
          }
        }
    };

    var chart = new ApexCharts(document.querySelector("#chart-timeline"), options);
    chart.render();

    var resetCssClasses = function(activeEl) {
      document.querySelectorAll('button').forEach(el => el.classList.remove('active'));
      activeEl.target.classList.add('active');
    }

    document.querySelector('#one_month').addEventListener('click', function(e) {
      resetCssClasses(e);
      chart.zoomX(new Date('28 Jan 2013').getTime(), new Date('27 Feb 2013').getTime());
    });

    document.querySelector('#Letzter Tag').addEventListener('click', function(e) {
      resetCssClasses(e);
      chart.zoomX(new Date('27 Sep 2012').getTime(), new Date('27 Feb 2013').getTime());
    });

    document.querySelector('#one_year').addEventListener('click', function(e) {
      resetCssClasses(e);
      chart.zoomX(new Date('27 Feb 2012').getTime(), new Date('27 Feb 2013').getTime());
    });

    document.querySelector('#ytd').addEventListener('click', function(e) {
      resetCssClasses(e);
      chart.zoomX(new Date('01 Jan 2013').getTime(), new Date('27 Feb 2013').getTime());
    });

    document.querySelector('#all').addEventListener('click', function(e) {
      resetCssClasses(e);
      chart.zoomX(new Date('23 Jan 2012').getTime(), new Date('27 Feb 2013').getTime());
    });
</script>

说明 #

• 添加了selection-result容器用于展示框选结果
• 修正了原代码中series配置的语法错误
• 对按钮选择器进行了匹配修正，确保功能正常
• 自定义计算部分可根据需求修改（如改为计算平均值、最大值等）

内容的提问来源于stack exchange，提问作者maethe13