使用 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/，它有雨图设置，但 Rain Total 系列中没有任何数据。

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

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

//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/

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

Creating a responsive accumulated rain chart from a series containing individual rain fall data using Highcharts

jquery

json

series

highcharts

responsive