Highcharts可以从服务器加载数据，但不能更新

Highcharts load data from server ok, but not updating

本文关键字：数据 但不能 更新 加载 服务器 Highcharts      更新时间：2023-09-26

我成功地从数据库加载，但它不更新动态。函数InitHighchart产生Highchart，我正试图使用requestData函数更新系列

function requestData() {
        $.ajax({
            url: 'http://....url.../json.php',
            data: {region:region},   
            type: 'post',
            dataType: 'json',
            error: function (point) {
                var series = chart.series[0],
                shift = series.data.length > 50; // shift if the series is longer than 20
                var values = eval(point);
                chart.series[0].addPoint([values[0], values[1]], true, shift);
                chart.series[1].addPoint([values[0], values[2]], true, shift);
                // call it again after defined seconds
                setTimeout(requestData, 1000);
            },
            success: function (point) {
                var series = chart.series[1],
                shift = series.data.length > 50; // shift if the series is longer than 20
               // add the point
               // chart.series[0].addPoint(eval(point), true, shift);
               var values = eval(point);
               chart.series[0].addPoint([values[0], values[1]], true, shift);
               chart.series[1].addPoint([values[0], values[2]], true, shift);
               // call it again after defined seconds
               setTimeout(requestData, 1000);
            },
            cache: false
        });
    }

这里是图表

<!-- 2. Add the JavaScript to initialize the chart on document ready -->
<script>

//它就在这里定义图表吗？

var chart; // global
    var region = "<?php Print($region); ?>";
    function requestData() {
        $.ajax({
            url: 'http://cstation.admie.gr/iREACT_cSTATION_WEB/trexousa_katastasi/json.php',
            data: {region:region},  
            type: 'post',
            dataType: "json",
            error: function (point) {
                var series = chart.series[0],
                    shift = series.data.length > 50; // shift if the series is longer than 20
                    var values = eval(point);
                    chart.series[0].addPoint([values[0], values[1]], true, shift);
                    chart.series[1].addPoint([values[0], values[2]], true, shift);
                    // call it again after defined seconds
                    setTimeout(requestData, 1000);
            },
            success: function (point) {
                var series = chart.series[1],
                    shift = series.data.length > 50; // shift if the series is longer than 20
                // add the point
               // chart.series[0].addPoint(eval(point), true, shift);
                var values = eval(point);
                chart.series[0].addPoint([values[0], values[1]], true, shift);
                chart.series[1].addPoint([values[0], values[2]], true, shift);

                // call it again after defined seconds
                setTimeout(requestData, 1000);
            },
            cache: false
        });

    }
  function InitHighChart()
  {
     $("#chart1").html('LOADING');
     var options = 
     {
        chart: {
           renderTo: 'chart1',
           borderColor: '#a1a1a1',
           borderRadius: 13,
           alignTicks: false,
           zoomType: 'xy',
           height: 700,
           events : {
                load :requestData()
            }
        },
        credits: {
           enabled: false
        },
        title: {
           text: "",
           x: -50
        },
        xAxis: {
           series: [{}],
           labels: {
              rotation: -75
           }
        },
        yAxis: [{ //Primary yAxis
           labels: {
              format: '{value}',
              style: {
                 color: "#000000"
              }
           },
           title: {
              text: '',
              style: {
                 color: "#0B0EED"
              }
           }
        }
        ],
        tooltip: {
           formatter: function() {
              var s = '<b>'+ this.x +'</b>';
              $.each(this.points, function(i, point) 
              {
                 s += '<br/>'+point.series.name+': '+point.y;
              });
              return s;
           },
           shared: true
        },
        series: [{},{}]
     };
     //ajax call
     $.ajax({   
        url: "http://...url.../json1.php",
        data: {region:region},   
        type:'post',
        dataType: "json",
        success: function(data)
        {
           options.xAxis.categories = data.datetime;
           options.series[0].name = 'Συνολικό Φορτίο (MWatt)';
           options.series[0].data = data.SD_PData;
           options.series[0].color = "#05A43C";
           options.series[1].name = 'Συνολικό Φορτίο Φαινομένου (MVar)';
           options.series[1].data = data.SD_MVAData;
           options.series[1].color = "#EC2E03";
           var chart = new Highcharts.Chart(options);          
        },
     });
  }
  </script>


  <!-- 3. Add the container -->
  <div id="chart1" style="width: 1200px; height: 700px; margin: 0 auto"><body onload="InitHighChart()"></div>

试试这个。我在我的一个代码中也做了同样的事情。

var options = {
chart: {
    renderTo: 'chart',
    defaultSeriesType: 'column'
},
title: {
    text: 'Voting Results'
},
xAxis: {
    categories: []
},
yAxis: {
    title: {
        text: 'votes'
    }
},
series: [{}]
};
$.getJSON('votecount2.php', function(data) {
    options.series[0].name = "Votes";
    options.series[0].data = data;
    var chart = new Highcharts.Chart(options);
});

我的JSON就是这个

[["Waseem Akhtar"，5]，["Imran Ismail"，4]，["Qaim Ali Shah"，4]]

相关文章：