使用 Highcharts 从包含单个降雨数据的系列中创建响应式累积降雨图

Question

想要创建一个高图表，显示图表中可见数据点的降雨数据和累积降雨（即累积降雨序列将始终保持为 0），基本上如下所示：

我使用以下代码从 JSON 文件填充静态系列，该代码在打开第一个图表时执行：

//Import data from the JSON file
function getChartdata() 
{
    $.ajax({
    url: 'data/7days_highchart.json',
    datatype: "json",
    success: function(data) 
    {
           chart1.series[0].setData(data.map(el => [el[0], el[3]]));
           chart1.series[1].setData(data.map(el => [el[0], el[4]]));
           chart1.series[2].setData(data.map(el => [el[0], el[6]]));
           chart1.series[3].setData(data.map(el => [el[0], el[5]]));

           chart2.series[0].setData(data.map(el => [el[0], el[7]]));
    },      
    });
}

我有一个 jsfiddle https://jsfiddle.net/ashenshugar/1k6je58o/，它设置了雨量图，但在总雨量系列中没有任何数据。

如何将截至每个时间点的降雨数据总和导入图表的第二个系列，以便总降雨系列仅将可见的降雨数据相加？

更新：我已经能够弄清楚如何创建一个系列，这是雨系列的总和

//Import data from the JSON file
function getChartdata() 
{
    $.ajax({
    url: 'data/7days_highchart.json',
    datatype: "json",
    success: function(data) 
    {
           chart1.series[0].setData(data.map(el => [el[0], el[3]]));
           chart1.series[1].setData(data.map(el => [el[0], el[4]]));
           chart1.series[2].setData(data.map(el => [el[0], el[6]]));
           chart1.series[3].setData(data.map(el => [el[0], el[5]]));

           chart2.series[0].setData(data.map(el => [el[0], el[7]]));
           chart2.series[1].setData(data.map(el => [el[0], Rain_Total += el[7]]));
    },      
    });
}

但是，这仍然不会在缩放图表时自动归零总降雨量

Answer 1

您需要在每个afterSetExtremes事件函数回调中计算'Total Rain'系列的数据，例如：

chart2 = Highcharts.chart('chart2_container', {
    xAxis: {
        type: 'datetime',
        events: {
            afterSetExtremes: function () {
                var xMin = this.chart.xAxis[0].min;
                var xMax = this.chart.xAxis[0].max;

                this.chart.series[1].setData(
                  temp_data.map(el => [
                    el[0], 
                    el[0] >= xMin ? Rain_Total += el[7] : 0
                  ]),
                  false
                );

                Rain_Total = 0;

                chart1.xAxis[0].setExtremes(xMin, xMax);
                chart2.xAxis[0].setExtremes(xMin, xMax);       
            }
        }
    },
  ...

})

---

现场演示： https://jsfiddle.net/BlackLabel/ajxmrt0k/