Question

我试图动态更新highcharts样条曲线图上的点。我正在使用json.AJAX HTTP get请求访问phpMyAdmin数据库，该数据库持有不断更新的数据字段（用于异步更新功能）。

从我从控制台日志中可以看出，以及一些测试，我的AJAX HTTP请求成功地从数据库中获取数据并将其返回给我的主机。问题出现在HIGHCHARTS语法中。我不知道如何正确地给予＆＃34;数据到我的＆＃34; y＆＃34;协调我的新观点。

参见附件代码：

<div id="noise" style="width: 300px, height: 300px">
    <script>
        $(function () {
            $(document).ready(function () {
                Highcharts.setOptions({
                    global: {
                        useUTC: false
                    }
                });

                $('#noise').highcharts({
                    chart: {
                        type: 'spline',
                        animation: Highcharts.svg, // don't animate in old IE
                        marginRight: 10,
                        events: {
                            // AJAX post to host, which will send CS50::query into database
                            load: function () {
                                var series = this.series[0];
                                setInterval(function () {
                                    var x = (new Date()).getTime(), // current time
                                        y = jQuery.ajax({
                                                type: "GET",
                                                url: '../host.php',
                                                dataType: 'json',
                                                data: { type: 'noise' },
                                                success: function (noiseValue, textstatus) {
                                                    if (!('error' in noiseValue)) {
                                                        yourVariable = Number((noiseValue[0])["test"]);
                                                        console.log(yourVariable);
                                                    }
                                                    else {
                                                        console.log(noiseValue.error);
                                                    }
                                                }
                                            });

                                    series.addPoint([x, y], true, true);
                                }, 2000);
                            }
                        }
                    },
                    title: {
                        text: 'Is Baby Crying?'
                    },
                    xAxis: {
                        type: 'datetime',
                        tickPixelInterval: 150
                    },
                    yAxis: {
                        title: {
                            text: 'Quiet................................................Loud'
                        },
                        plotLines: [{
                            value: 0,
                            width: 1,
                            color: '#808080'
                        }]
                    },
                    tooltip: {
                        formatter: function () {
                            return '<b>' + this.series.name + '</b><br/>' +
                                Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
                                Highcharts.numberFormat(this.y, 2);
                        }
                    },
                    legend: {
                        enabled: false
                    },
                    exporting: {
                        enabled: false
                    },
                    series: [{
                        name: 'Baby Cries',
                        data: (function () {
                            // generate an array of random data
                            var data = [],
                                time = (new Date()).getTime(),
                                i;

                            for (i = -19; i <= 0; i += 1) {
                                data.push({
                                    x: time + i * 2000,
                                    y: Math.random()
                                });
                            }
                            return data;
                        }())
                    }]
                });
            });
        });

    </script>
</div>

Answer 1

您需要在内部成功回调中添加点，例如：

success: function (noiseValue, textstatus) {
    if (!('error' in noiseValue)) {
        yourVariable = Number((noiseValue[0])["test"]);
        console.log(yourVariable);
        series.addPoint([x, yourVariable]);
    } else {
        console.log(noiseValue.error);
    }
}

无法在Highcharts样条曲线图上动态更新y值

1 个答案: