Question

我一直在寻找用于更新Highcharts数据的各种选项的几天。我所尝试过的一切都没有奏效，我知道我缺乏编程技巧会阻止我。我已经阅读了Highcharts中的文档，但它没有给出在标准脚本中调用php文件但是显示randonm数据生成器的示例！

有人可以提供帮助。

我有一个平面图，其中的项目会根据桌面被占用或未被占用而改变颜色。我使用PHP文件从MSSQL服务器提取数据，并在刷新页面时使用最新数据进行更新。

enter image description here

我想尽可能每5秒更新一次信息，但只更新数据点而不是页面。我有其他图表，我想做同样的事情。

这是图表代码：

<script type="text/javascript">  // PLAN INDICATING OCCUPIED OR UNOCCUPIED DESKS
        $(function() {
    $('#chart1').highcharts({
        chart: {
            plotBackgroundImage: '/Highcharts/graphics/HSSMIPLAN.png',
            height: 600,
            animation: false
        },

        credits: {
            enabled: false
        },

        title: {
        text: null      //'HSSMI Occupancy Plan (Live)'
    },

        xAxis: {
        min: 0,
        max: 1000,
        labels: {enabled:false},
        lineColor: 'transparent',
        minorTickLength: 0,
        tickLength: 0
    },

        yAxis: {
        min: 0,
        max: 600,
        title: false,
        gridLineWidth: 0,
        labels: {enabled:false},
        lineColor: 'transparent',
    },

    legend: {
            enabled: false
        },

    plotOptions: {
        series: {
            cursor: 'ns-resize',
            point: {
                events: {
                    drag: function (e) {
                        $('#drag').html(
                            'Dragging <b>' + this.series.name + '</b>, <b>' + this.category + '</b> to <b>' + Highcharts.numberFormat(e.newY, 0) + '</b>');
                    },
                    drop: function () {
                        $('#drop').html(
                            'In <b>' + this.series.name + '</b>, <b>' + this.category + '</b> was set to <b>' + Highcharts.numberFormat(this.y, 0) + '</b>');
                    }
                }
            },
            //stickyTracking: false
        },

    },

    tooltip: {
            borderColor: 'rgb(43, 110, 151)',
            formatter: function () {
                return 'Sensor: <b>'+ this.point.name + '</b><br>X Value: <b>' +
                    this.point.x + '<br>Y Value: <b>' + this.point.y +'</b>';
            }
        },

    series: [{
        type: 'bubble',
        minSize: 25,
        maxSize: 25,
        cursor: 'pointer',
        draggableX: false,
        draggableY: false,
        data: [<?php echo $data12a?>]
        }]

    });


$('#getcsv').click(function () {
    var csv = "Series;Name;X;Y\n";
    $.each(Highcharts.charts[0].series, function(i,s){
        $.each(s.points, function(j,p){
            csv += s.name + ";" + p.name + ";" + p.x + ";" + p.y + "\n";
        });
    });
    alert(csv);
});

});

        </script>

我一直在查看各种选项，但不确定将代码添加到现有脚本的位置或方式。

我看到这是为了更新表格，并认为它可能接近我的需要：

<script type="text/javascript">
    $(document).ready(function(){
      refreshTable();
    });

    function refreshTable(){
        $('#tableHolder').load('getTable.php', function(){
           setTimeout(refreshTable, 5000);
        });
    }
</script>

一如既往，您可以给予任何帮助。

由于罗布

Answer 1

使用方法 setData Highcharts - setData

如何用实时数据更新Highcharts？

1 个答案: