时间戳

首页 > 解决方案 > 使用 Highcharts 从包含单个降雨数据的系列中创建响应式累积降雨图

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

问题描述

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

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

//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]]));
    },      
    });
}

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

标签： jqueryjsonhighchartsresponsiveseries

解决方案

您需要在每个事件函数回调中计算“总雨”系列的数据afterSetExtremes，例如：

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/

推荐阅读