Question

我正在尝试将多个数据系列显示到Highcharts的图中，我想从ajax自调用函数中获取数据（为了得到几乎没有重绘整个图表的实时图表，只是数据更新）谁引用一个外部PHP文件谁给了我这个表在输出中有很大的好处，在表的第一行有系列名称，并在相应的列上的系列值（我得到表填充了正确的标题来自MySQL数据库）：

 <table id='datatable'> 
    <tr> //First row representing series name
      <th>gap</th> 
      <th>best</th> 
      <th>last</th> 
      <th>rcp</th> 
      <th>tot</th> 
    </tr> 
    <tr> // Second row with corresponding series values for first point
      <td>16.011</td> 
      <td>527.238</td> 
      <td>527.238</td> 
      <td>527.238</td> 
      <td>527.238</td> 
    </tr> 
    <tr> // third row with corresponding series values for second point
      <td>18.433</td> 
      <td>519.296</td> 
      <td>519.296</td> 
      <td>523.267</td> 
      <td>1046.534</td> 
    </tr> 
</table>

现在在我的Html页面中，我有一个自调用Ajax函数：

<!DOCTYPE html>
<html>
<head>
    <title>Example</title>
    <script src="js/jquery/jquery-1.12.3.js"></script>
    <script src="js/Highcharts/Highcharts-4.2.3/highcharts.js"></script>
    <script>
       var chart;
       var dataSource = 'TableForecast-03_testdontworking.php';
       var ChartHeight = window.innerHeight;
       var dataPoints = [];
       var index;
       function requestData()
       {
         $.ajax({url: dataSource, success: function(dataForMoreSeries) //dataForMoreSeries is the data you get from the request 
         {
           setTimeout(requestData, 2500);
         },
         cache: false
         });
       }

       $(document).ready(function() {
         //add our div for the chart
         $("#container").append("<div id=chart-Time style='width:100%''></div>");
         //StockChart
         //Chart
         chart = new Highcharts.Chart({
           chart: {
             height: ChartHeight,
             renderTo: 'chart-Time',
             defaultSeriesType: 'spline',

             events: {
               load: function() {
                 requestData();
               }
             },
           },
           title: {
             text: 'TIME'
           },
           xAxis: {
             type: 'datetime',
             title: {text: 'DAYTIME'},
           },
           yAxis: {
             title: {text: 'TIME'},
         },
         series: []
         }); //end chart       
       }); //end document.ready

      $(document).ready(function(){
          requestData();
      })
</script>
</head>
<body>
    <div id="container"></div>
</body>
</html>

我想要实现的目标在此jsfiddle中，但具有Ajax自调用功能。但是，因为我对ajax和JS很陌生，我对如何正确地将数据从表格提供给系列没有任何想法，你能给我一些建议吗？

谢谢，最好的问候

Answer 1

我几乎达到了我的目标，我可以从函数getResult 调用的PHP文件中提取具有正确名称和值的多系列文件。

唯一的问题是我每次都会重新编写完整系列，有关如何解决这个问题的任何建议吗？

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script src="http://code.highcharts.com/highcharts.js"></script>
    <script src="http://code.highcharts.com/modules/data.js"></script>
    <script src="http://code.highcharts.com/modules/exporting.js"></script>
    <script>

jQuery().ready(function(){
    setInterval("getResult()",1000);
});
function getResult(){   
    jQuery.post("table.php",function(data) {
        jQuery("#table").html(data);
    });


    $(document).ready(function () {
        $('#container').highcharts({
            data: {
                table: document.getElementById('datatable')
            },
            chart: {
                type: 'line',
            },
            title: {
                text: 'Data extracted from a HTML table in the page'
            },
            yAxis: {
                title: {
                    text: 'Units'
                }
            },
        });
    });
}
    </script>
    </head>
    <body>
    <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
    <div id="table" style="position: absolute; left: -9999em;"></div> //Style set to hide the table
    </body>

Answer 2

查看highcharts中的data属性。这使您能够从HTML表中读取数据。根据您的复杂程度，您可以直接连接它，或者您可能需要在表行/列上循环以生成您的系列（您还没有完全解释您的输出，所以这是我在这一点上可以说的最多）。现在，为了使图表能够在表的成功填充中绘制，您可以在ajax调用本身中触发图表构建器代码。

以下是来自hagbard的解决方案，无需重新绘制整个图表对象即可进行刷新：

$("#refresh").click(function() {
    debugger;

    var complete = function(options) {
        // get the two HC-series objects
        var chart = $('#container').highcharts();
        var series1 = chart.get('series1');
        var series2 = chart.get('series2');

        // set new data
        series1.setData(options.series[0].data, false);
        series2.setData(options.series[1].data, false);

        // and redraw chart
        chart.redraw();
    };

    // call the data parser of HC
    Highcharts.data({
        table : document.getElementById('datatable'),
        complete : complete
    });
});

这被视为this问题的扩展答案。您需要在ajax调用中移动刷新函数调用以获取表中的新数据。

从Ajax生成的HTML表格到Highcharts绘制多个系列

2 个答案: