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

Posted 2023-05-08

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

【英文标题】：Creating a responsive accumulated rain chart from a series containing individual rain fall data using Highcharts

【发布时间】：2020-07-24 01:54:38

【问题描述】：

想要创建一个高图表，显示图表中可见数据点的降雨数据和累积降雨（即累积降雨序列将始终保持为 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]]));
    ,      
    );

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

【参考方案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/

【讨论】：

谢谢，我正在努力调整使用 temp_data 变量代替 JSON 的 jsfiddle 代码。你能解释一下我应该如何调整代码以从 JSON 文件加载系列，或者用 el[0]、el[7] JSON 数据填充变量 temp_data？

嗨@ashenshugar，您可以将接收到的数据存储在某个变量中并在afterSetExtremes函数中引用它，例如：jsfiddle.net/BlackLabel/ajxmrt0k/1