Fatal编程技术网
  • javascript/
  • Javascript 从Ajax生成的HTML表到Highcharts绘制多个系列

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

javascript php jquery ajax highcharts

Javascript 从Ajax生成的HTML表到Highcharts绘制多个系列,javascript,php,jquery,ajax,highcharts,Javascript,Php,Jquery,Ajax,Highcharts,我正在尝试将多个数据系列显示到Highcharts的绘图中，我希望从ajax自调用函数中获取数据（以便在不重新绘制整个图表的情况下获得几乎实时的图表，而只是更新数据）他们引用了一个外部PHP文件，该文件在输出中为我提供了这个表，该表的最大优点是在表的第一行上有序列名称，在相应的列上有序列值（我从MySQL数据库中获得了用适当标题填充的表）： //表示系列名称的第一行 缺口 最好的 最后 rcp 托特 //第二行与第一个点对应的系列值 16.011 527.238 527.238 527.238

我正在尝试将多个数据系列显示到Highcharts的绘图中，我希望从ajax自调用函数中获取数据（以便在不重新绘制整个图表的情况下获得几乎实时的图表，而只是更新数据）他们引用了一个外部PHP文件，该文件在输出中为我提供了这个表，该表的最大优点是在表的第一行上有序列名称，在相应的列上有序列值（我从MySQL数据库中获得了用适当标题填充的表）：


//表示系列名称的第一行
缺口
最好的
最后
rcp
托特
//第二行与第一个点对应的系列值
16.011
527.238
527.238
527.238
527.238
//第三行，第二点对应系列值
18.433
519.296
519.296
523.267
1046.534
现在在我的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>


例子
var图；
var dataSource='TableForecast-03_testdontworking.php'；
var ChartHeight=window.innerHeight；
var数据点=[]；
var指数；
函数requestData（）
{
$.ajax（{url:dataSource，success:function（dataForMoreSeries）//dataForMoreSeries是从请求中获得的数据
{
设置超时（requestData，2500）；
},
缓存：false
});
}
$（文档）.ready（函数（）{
//为图表添加我们的div
$（“#container”）.append（“查看highcharts中的属性。这使您能够从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
    });
});



这是对问题的扩展回答。您需要将刷新函数调用移动到ajax调用中，以获取表中的新数据。
我几乎达到了我的目标，我可以使用适当的名称和值显示多个系列，这些名称和值是从函数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>




jQuery（）.ready（函数（））{
setInterval（“getResult（）”，1000）；
});
函数getResult（）{
post（“table.php”，函数（数据）{
jQuery（“#table”）.html（数据）；
});
$（文档）.ready（函数（）{
$（“#容器”）。高图({
数据：{
表：document.getElementById（'datatable'）
},
图表：{
键入：“行”，
},
标题：{
text:“从页面中的HTML表提取的数据”
},
亚克斯：{
标题：{
文本：“单位”
}
},
});
});
}
//设置样式以隐藏表格

我已经用一些更详细的信息编辑了这个问题，以及一个我想要实现的JSFIDLE示例。感谢您的反馈。我不能在ajax调用中启动图表生成器，因为它会在每次超时后重新绘制所有图表，我只需输入数据，以便在每次超时时更新反数据，而无需重新绘制字符t、 感谢您的反馈，致以最诚挚的问候。我假设在初始加载时，您可以读取表格并构建图表。然后，在对表格内容进行数据更新（通过Ajax或其他方式）时，您希望更新图表中的系列数据，对吗？请参见此处hagbard的回答：。在不重新绘制整个图表的情况下进行更新。您必须将其称为“刷新"刷新数据时在ajax中使用函数。我有点困惑，因为在每个示例中都有序列分配，这是我希望在代码中避免的，就像在这个JSFIDLE中，序列名称来自表头：为什么不能从PHP返回JSON，可以节省时间和解析数据。更重要的是，图表应该是在$.ajax（）回调中初始化，以避免同步问题。我考虑的是表，因为我看到一些示例，其中highcharts似乎从表头（）获取序列名。这对我的代码来说是一个很大的优势。但是表需要位于DOM中。因此JSON更高效，更易于使用。使用JSON的示例：是否可以从JSON中检索序列名？是的，您需要在JSON中定义名称字段。JSON的示例：{name:'Tokyo'，data:[7.0,6.9,9.5,14.5,18.2,21.5,25.2,26.5,23.3,18.3,13.9,9.6]}您可以查看您在
getResult
=图表中的当前系列元素中得到的数据系列。如果不同，则更新系列。如果不一样，则不更新。

<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>