Создание адаптивной накопленной диаграммы дождя из серии, содержащей отдельные данные о падении дождя, с использованием Highcharts - PullRequest
Новая
       39

Создание адаптивной накопленной диаграммы дождя из серии, содержащей отдельные данные о падении дождя, с использованием Highcharts

1 голос
/ 11 апреля 2020

Хотелось бы создать верхнюю диаграмму, которая показывает данные о дожде и накопленный дождь для видимых точек данных на диаграмме (ie накопленный ряд дождей всегда будет оставаться на 0), по сути, выглядит так: Example chart showing rain data and accumulated rain

Я заполняю серию stati c из файла 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 Ответ

1 голос
/ 13 апреля 2020

Вам необходимо вычислять данные для серии «Всего дождя» в каждом 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/

...