php - 来自 mysql 数据的 Highchart json 无法显示在折线图中

Question

我有以下数据，这些数据是通过 json 和 ajax 从 mysql 查询动态获取的。它只是无法填充到图表中。我在下面展示了我的示例数据的样子。我将一些示例数据放入数据系列中，如下所示。我也尝试过这个 Chart.series[0].setData( eval( '(' + data + ')' ) );也不工作

["[1443843286000,0]",
 "[1443843286000,100]",
 "[1443843356000,200]",
 "[1443843356000,0]",
 "[1443843356000,100]",
 "[1443843359000,0]"," ....

这是 mysql 如何生成此数据的片段。

    while($row = $selectQueryResult1->fetch())
  {
    $count++;

    $dateTimer1 =$row['dateTimer']*1000;
    $speed=$row['speed'];        
    $data[] = "[$dateTimer1,$speed]";

  }

  echo json_encode($data);

调用ajax并初始化图表。

$(function () {
                var chart;
                $(document).ready(function() {

                    chart = new Highcharts.Chart({
                        chart: {
                            renderTo: 'dashBoardData',
                            type: 'line',
                            marginRight: 130,
                            marginBottom: 25
                        },
                        title: {
                            text: 'Speed Graph:' ,
                            x: -20 //center
                        },
                        subtitle: {
                            text: '',
                            x: -20
                        },
                        xAxis: {

                            type: 'datetime',

                            dateTimeLabelFormats: { 
                                                      second: '%Y-%m-%d %H:%M',
                                                      minute: '%Y-%m-%d %H:%M',
                                                      hour: '%Y-%m-%d %H:%M',
                                                      day: '%Y-%m-%d %H:%M',
                                                      week: '%Y-%m-%d %H:%M',
                                                      month: '%Y-%m-%d %H:%M',
                                                      year: '%Y-%m-%d %H:%M'
                                                    },
                                                    title: {
                                            text: 'Date Time'
                                        },
                                        labels: {
                                            rotation: 0
                                        }  
                        },

                        yAxis: {
                            title: {
                                text: 'Speed (km/h)'
                            },
                            min: 0
                        },
                        tooltip: {
                            formatter: function() {
                                    return '<b>'+ this.series.name +'</b><br/>'+
                                    Highcharts.dateFormat('%Y-%m-%d %H:%M', this.x) +': '+ this.y;
                            }
                        },
                        legend: {
                            layout: 'vertical',
                            align: 'right',
                            verticalAlign: 'top',
                            x: -10,
                            y: 100,
                            borderWidth: 1
                        },
                        credits: {
                                                  enabled: false
                                              },
                        series: [{
                            name: 'Speed Data'



                        }]


                    });
                    $("#SearchDb").click(function(){
                                     var data = $(this).val();
                                     var dateFrom=document.getElementById("beginDateInput").value;
                                     dateTimeFromArray=dateFrom.split(" ");
                                         dateFromArray=dateTimeFromArray[0].split("/");     


                                     var dateTo=document.getElementById("endDateInput").value;
                                     dateTimeToArray=dateTo.split(" ");
                                         dateToArray=dateTimeToArray[0].split("/");


                                     mysqlDateFrom=dateFromArray[2]+"-"+dateFromArray[1]+"-"+dateFromArray[0]+" "+dateTimeFromArray[1];
                                     mysqlDateTo=dateToArray[2]+"-"+dateToArray[1]+"-"+dateToArray[0]+" "+dateTimeToArray[1];



                                             $.post('getSpeedGraph.php', {b: mysqlDateFrom,e:mysqlDateTo }, function(data){



                                                chart.series[0].setData(["[1443843286000,0]","[1443843286000,100]","[1443843356000,200]","[1443843356000,0]","[1443843356000,100]","[1443843359000,0]","[1443843359000,0]","[1443843369000,0]","[1443843369000,0]","[1443843380000,0]","[1443843380000,0]","[1443843389000,0]","[1443843389000,0]","[1443843409000,0]","[1443843409000,0]","[1443843419000,0]","[1443843419000,0]","[1443843419000,0]","[1443843482000,0]","[1443843482000,0]","[1443843482000,0]","[1443843545000,17]","[1443843545000,20]","[1443843545000,20]","[1443843576000,0]","[1443843576000,0]","[1443843576000,0]","[1443843639000,7]","[1443843639000,7]","[1443843639000,6]","[1443843667000,0]","[1443843667000,0]","[1443843667000,0]","[1443843732000,0]","[1443843732000,0]","[1443843732000,0]","[1443843796000,0]","[1443843796000,0]","[1443843796000,0]","[1443843859000,0]","[1443843859000,0]","[1443843859000,0]","[1443843927000,0]","[1443843927000,0]","[1443843927000,0]","[1443843990000,0]","[1443843990000,0]","[1443843990000,0]","[1443844056000,0]","[1443844056000,0]","[1443844056000,0]","[1443844119000,0]","[1443844119000,0]","[1443844119000,0]","[1443844182000,0]","[1443844182000,0]","[1443844182000,0]","[1443844236000,0]","[1443844236000,0]","[1443844236000,0]","[1443844300000,0]","[1443844300000,0]","[1443844300000,0]","[1443844363000,0]","[1443844363000,0]","[1443844363000,0]","[1443844428000,0]","[1443844428000,0]","[1443844428000,0]","[1443844491000,0]","[1443844491000,0]","[1443844491000,0]","[1443844554000,0]","[1443844554000,0]","[1443844554000,0]","[1443844617000,0]","[1443844617000,0]","[1443844617000,0]","[1443844755000,0]","[1443844755000,0]","[1443844852000,0]","[1443844852000,0]","[1443844852000,0]","[1443844876000,0]","[1443844876000,0]","[1443844876000,0]","[1443844948000,0]","[1443844948000,0]","[1443844948000,0]","[1443845021000,0]","[1443845021000,0]","[1443845021000,0]","[1443845085000,10]","[1443845085000,10]","[1443845085000,9]","[1443845159000,0]","[1443845159000,0]","[1443845159000,0]","[1443845223000,0]","[1443845223000,0]","[1443845223000,0]","[1443845287000,0]","[1443845287000,0]","[1443845287000,0]","[1443845353000,0]","[1443845353000,0]","[1443845353000,0]","[1443845377000,13]","[1443845377000,12]","[1443845377000,11]","[1443845442000,0]","[1443845442000,0]","[1443845442000,2]","[1443845508000,0]","[1443845508000,0]","[1443845508000,0]","[1443845573000,0]"]);
                                                 }
                                                );

                                    }
                                    );


                });

    });

Answer 1

我找到了一个简单的解决方案。只是为了其他人的帮助和引用，只需运行这个 Chart.series[0].setData( eval(data) );