logo标签列表

Highcharts 动态更新 x 轴类目

javascriptjqueryhighcharts
3
我正在寻求帮助，更新一个Highcharts图表中x轴分类的内容，该图表定期接收数据。
图表在一个名为forecastgraph.html的文件中定义。通过<?php require("widget/forecastgraph.html"); ?>的方式加载到index.php网页，在我想要显示它的地方。图表按预期呈现。
通过一个叫做mqtt.js的js脚本处理实时数据（以json格式接收），并使用jquery更新index.php中的各个部分： $("#elementid").html(a.b.c);。我通过<script src="./js/mqtt.js"></script>将mqtt.js加载到index.php的头部。这也完美地工作。
我正在困扰如何将mqtt.js接收到的新数据传递给图表，以便在新数据到来时更新它。具体而言，我试图更新xAxis类别和相应的值对。定期地，mqtt.js会接收到一个新的天气预报，因此需要更新xAxis类别以反映预测适用的新时间段，并更新数据以反映相应预测期间的新高温和低温。
下面是图表的代码。任何帮助将不胜感激。
Baobab
<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"
}]

负责处理mqtt.js脚本中传入json格式数据的函数在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

在index.php中，使用传入的数据更新各种html元素非常稳定。但是我曾尝试过使用mqtt.js脚本放置在全局变量（在脚本开头声明为全局）中的数据来更新图表，但未成功。在上面的示例中，需要将forecast_period_1用作四个xAxis类别中的第一个，将forecast_period_1_high和forecast_period_1_low用于更新图表数据中的相应高低值。

据我所知 - 这是您的初始图表 - https://jsfiddle.net/BlackLabel/1j9c8m2k/，现在您想将新数据附加到其中？您能添加一些需要附加的数据示例吗？ - Sebastian Wędzel
你好 - 感谢您的关注。我已经更新了我的帖子并添加了更多信息。 - Baobab
2个回答
1
我已经找到了一个解决方案。首先，你需要将图表存储在一个变量中，然后才能更新图表数据。就像下面这样。 
var chart = $('#forecastgraph').highcharts({ ...option })

更新x轴或系列数据

// Update xAxis data label
chart.update({
                xAxis: {
                    categories: [1,2,3,4]
                }
            });

// Update series data
chart.series[0].update({
                data: [
                         [20, -3],
                         [5, -2],
                         [6, -2],
                         [8, -15]
                      ]
               });
1
我认为这部分回答了我所问的问题 - 谢谢。更新应该自动发生 - 基于定时器或者更好的是基于接收到的更新数据 - 不需要通过按钮触发。此外，是否有方法可以更新x轴类别，以便每个高/低值对都标记有正确的预测期？ - Baobab
更新应该自动发生 - 基于计时器或更好的是基于接收到的更新数据 - 而不需要通过按钮触发。这取决于您的实现，我只是向您展示了如何更新数据的示例。要更新xAxis类别，请使用此轴上的更新 - https://api.highcharts.com/class-reference/Highcharts.Axis#update - Sebastian Wędzel
谢谢。花了一些时间，但是我通过您的示例弄清楚了。可以通过以下方式更新类别：chart.xAxis [0] .setCategories（）。 - Baobab
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接