Javascript Highcharts动态更新x轴类别

我正在寻找帮助，用定期收到的数据更新Highcharts图表上的x轴类别

该图表在名为forecastgraph.html的文件中定义。它通过

加载到index.php，这是我希望它显示的网页。图表按预期呈现

通过js脚本（称为mqtt.js）处理的实时数据，该脚本接收json格式的传入mqtt数据，并使用jquery以以下方式更新index.php的各个部分：

$（“#elementid”）.html（a.b.c）。我使用
将mqtt.js加载到index.php的头部，这同样可以完美地工作

我正在努力解决的是如何将来自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>

在加载到index.php的mqtt.js脚本中，负责传入json格式数据的函数以这种方式处理传入数据（加载index.php时启动mqtt.js）：

用传入的数据更新index.php中的各种html元素效果很好而且很稳定。我试图做的是使用mqtt.js脚本放置在全局变量（在脚本开头声明为全局变量）中的数据更新图表，但没有成功。在上面的示例中，forecast_period_1需要用作四个xAxis类别中的第一个，forecast_period_1_high和forecast_period_1_low，以更新图表数据中各自的hi和lo值。
这是您想要实现的输出吗？在下面的演示中，我编写了一个函数，它接受一个高温和低温值，然后在按钮上触发下一步。使用
系列更新功能将新数据附加到图表上

演示：

API:
据我所知-这是您的初始图表-现在您想在其中附加新数据吗？您能添加一个需要附加的数据样本吗？您好-谢谢您的关注。我已经用更多的信息更新了我的帖子。我想这部分回答了我的问题-谢谢。更新应该自动发生——或者基于计时器，或者更好的是基于更新数据的接收——并且不需要按下按钮触发。此外，是否有方法更新xAxis类别，以便每个hi/lo值对都标有正确的预测期？
更新应自动进行-基于计时器或更好的是基于收到的更新数据-无需按下按钮触发。
这取决于您的实现，我刚刚给你展示了一个如何更新数据的例子。要更新xAxis类别，请使用此轴上的更新-谢谢。花了一段时间，但我用你的例子弄明白了。类别可以通过以下方式更新：chart.xAxis[0].setCategories（）。
[{
    "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"
}]

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