Мне нужна помощь в обновлении категорий оси X на диаграмме Highcharts с периодически получаемыми данными.

Диаграмма определена в файле с именем Forecastgraph.html. Он загружается на index.php, веб-страницу, на которой я хочу его отображать, с помощью <?php require("widget/forecastgraph.html"); ?>. Диаграмма отображается, как ожидалось.

Живые данные, которые обрабатываются с помощью js-скрипта (называемого mqtt.js), который получает входящие данные mqtt в формате json и с помощью jquery обновляет различные части index.php следующим образом: $("#elementid").html(a.b.c);. Я загружаю mqtt.js в заголовок index.php, используя <script src="./js/mqtt.js"></script>. Это снова работает безупречно.

Я борюсь с тем, как передавать входящие данные из mqtt.js в диаграмму, чтобы обновлять ее по мере поступления новых данных. В частности, я пытаюсь обновить категории xAxis и соответствующие пары значений. Периодически mqtt.js получает новый прогноз погоды, поэтому категории xAxis необходимо обновлять с учетом нового периода времени, к которому относится прогноз, и данные необходимо обновлять, чтобы отразить новые высокие и низкие температуры для соответствующих периодов прогноза.

Код для диаграммы размещен ниже. Любая помощь будет оценена по достоинству.

Баобаб

<script type="text/javascript">

$(function () {

    $('#forecastgraph').highcharts({

        chart: {
            type: 'columnrange',
        backgroundColor: 'rgba(0,0,0,0)',
        borderWidth: 0,
        margin: [12, 6, 36, 20]
        },

        title: {
            text: null,
        },

        exporting: {
            enabled: false
        },
        credits: {
            enabled: false
        },

        xAxis: {
            categories: [1,2,3,4],
        labels: {
            y: 30,
                style: {
                    color: 'white',
                    fontSize: '10px',
                    fontWeight: 'bold'
                }
            }
        },
        yAxis: {
            title: {
                enabled: false,
                x: -14,
            },
        labels: {
            align: 'left'
        },
        maxPadding: 0.5,
        plotLines: [{
        value: 10, //normmax
        width: 2,
        color: '#FF0000'
        },{
        value: 2, //normmin
        width: 2,
        color: '#009ACD'
        }]
        },

        tooltip: {
            enabled: false
        },

        plotOptions: {
            columnrange: {
                dataLabels: {
                    enabled: true,
                    style: {
                        textOutline: 'none'
                    },
                    crop: false,
                    overflow: 'none',
                    formatter: function () {
                        var color = this.y === this.point.high ? '#33C4FF' : 'red';
                        return '<span style="font-size: 12px; font-family:helvetica; font-weight:normal; text-shadow: none; color:' + color + '">' + this.y + '°</span>';
                        }
                }
            }
        },

        legend: {
            enabled: false
        },

        series: [{
            name: 'Temperatures',
            data: [
                [20, -3],
                [5, -2],
                [6, -2],
                [8, -15]
            ],
        color: '#b9deea',
        borderColor: '#92cbde',
        borderRadius: 4
        }]

    });

});

</script>

РЕДАКТИРОВАТЬ: Дополнительная информация.

Входящие данные json выглядят так:

[{
    "period": "Monday",
    "condition": "Cloudy",
    "high_temperature": "7",
    "low_temperature": "-2"
    "icon_code": "10",
    "precip_probability": "20"
}, {
    "period": "Tuesday",
    "condition": "A mix of sun and cloud",
    "high_temperature": "6",
    "low_temperature": "-2"
    "icon_code": "02",
    "precip_probability": "20"
}, {
    "period": "Wednesday",
    "condition": "A mix of sun and cloud",
    "high_temperature": "3",
    "low_temperature": "-5"
    "icon_code": "02",
    "precip_probability": "20"
}, {
    "period": "Thursday",
    "condition": "A mix of sun and cloud",
    "high_temperature": "1",
    "low_temperature": "-10"
    "icon_code": "02",
    "precip_probability": "20"
}]

Функция, отвечающая за входящие данные в формате json в скрипте mqtt.js, загруженном в index.php, обрабатывает входящие данные следующим образом (mqtt.js запускается при загрузке index.php):

function onMessageArrived(message) {
    console.log("onMessageArrived: " + message.payloadString);
    //Env Canada forecast
    if (message.destinationName == "myHome/ec/json_data_ec") {
        var data = JSON.parse(message.payloadString);
        $("#forecast_period_1").html(data[0].period); // update div forecast_period_1 in index.php for debugging purposes and show that data is coming in
        forecast_period_1 = (data[0].period); // assign to global var
        forecast_period_1_high = (data[0].high_temperature); // global var
        forecast_period_1_low = (data[0].low_temperature); // global var

Обновление различных элементов html по всему index.php с помощью входящих данных работает отлично и стабильно. Я попытался, но безуспешно, обновить диаграмму, используя данные, помещенные в глобальные переменные (объявленные как глобальные в начале скрипта) скриптом mqtt.js. В приведенном выше примере для обновления соответствующих значений hi и lo в данных диаграммы необходимо использовать pred_period_1 в качестве первой из четырех категорий xAxis, а также прогноз_period_1_high и прогноз_period_1_low.

3
Baobab 10 Мар 2021 в 07:58

1 ответ

Лучший ответ

Это результат, которого вы хотите достичь? В приведенной ниже демонстрации я написал функцию, которая принимает значение высокой и низкой температуры, а затем запускается по кнопке. Новые данные прикрепляются к диаграмме с помощью функции series.update.

Демо: https://jsfiddle.net/BlackLabel/he768cz3/

API: https://api.highcharts.com/class-reference/Highcharts. Серия # обновление

1
Sebastian Wędzel 11 Мар 2021 в 13:57