这是我在这里的第一个请求，我已经阅读了许多关于同一问题的其他相关帖子，但我仍然陷入困境并且在这方面几乎束手无策......所以任何帮助都是很多不胜感激!

我在 Page1.php 上有以下 Highcharts 对象，我使用 AJAX 在页面加载时以及下拉选项更改时从 Page2.php 获取数据。

(为便于阅读而截断):

$(document).ready(function() {

   var e = document.getElementById("selOption"); //<--- This is the dropdown
   var domText = e.options[0].text;
   var domID = e.options[e.selectedIndex].value;

   var options = {
      chart: {
         renderTo: 'linechart',
         type: 'line'
      },
      title: {
         text: 'Title for ' + domText
      },
      subtitle: {
         text: ''   
      },
      xAxis: {
         type: 'datetime',
         dateTimeLabelFormats: {
            month: '%b %e, %Y',
            year: '%Y'
         }
      },
      yAxis: {
         title: {
            text: 'Important Values'
         },
         reversed: true,
         min: 0,
         max: 100
      },
      tooltip: {
         formatter: function() {
                   return '<b>'+ this.series.name +'</b><br/>'+
               Highcharts.dateFormat('%b %e', this.x) +': '+ this.y;
         }
      },
      series: []

};

$.get('Page2.php?domID=' + domID,function(data) {
    $.each(data, function(key,value) {
        //var series = {};
        //series.name.push(value);
        //series.data.push([value]);
        options.series.push(data);
        //alert(data);
    });

    var linechart = new Highcharts.Chart(options);
});

});

Page2.php 有以下发送回 json:

$sqlSelect = "SELECT Item1,Item2,Item3 FROM... ";
$result = mysql_query($sqlSelect);

while ($item = mysql_fetch_assoc($result)) {            
    $name = $item['Item1'];
    $date = str_replace("-",",",$item['Item2']);
    $pos = $item['Item3'];

    $arr = array("name"=>$name,"data"=>"[Date.UTC(".$date."), ".$pos." ],");
    echo json_encode($arr);         
}

我的 json 返回看起来像这样:

{"name":"Item1","data":"[Date.UTC(2011,11,08), 4 ],"}
{"name":"Item1","data":"[Date.UTC(2011,11,08), 2 ],"}

当我的图表加载时，它在底部填充了 135 个系列名称 (?!?!?!)，并且似乎没有显示折线图上的点。

如果我删除双引号并将结果硬编码到系列数组中，效果会很好(尽管我注意到该示例在对象之间似乎没有逗号。

感谢您的所有帮助...尤其是快速回复! ;-)

最佳答案

已解决:

我找到了一个最终有效的答案!令人沮丧的是我花了几天时间，因为 Highcharts 没有很好地记录它(和/或者我对 jQuert 和 JavaScript 的理解可能仍处于新手水平)。

答案是不要在您的 json 对象中将 X/Y 数据作为预制数组发送，而是简单地发送构成日期 (x value)和Value(y值)作为json对象中的逗号分隔值列表，然后在客户端进行解析和推送。

例如:我最初试图让我的 PHP 发送类似

[{"name":"Name 1","data":["[Date.UTC(2011,11,08), 4 ]","[Date.UTC(2011,11,09), 4 ]","[Date.UTC(2011,11,10), 4 ]","[Date.UTC(2011,11,11), 4 ]","[Date.UTC(2011,11,14), 3 ]"]}

但我真正需要做的是发送类似

[{"name":"Name 1","data":["2011,11,08, 4","2011,11,09,4"....`

第一步是确保将“series”选项设置为空数组series: []

(我提到这一点是因为我看到其他答案的做法有所不同)。

然后在您的 getJSON 函数中，您需要为您拉入的每个对象创建一个新对象，其中还包括一个空的“数据”数组(请参阅下面的“var series”)。

然后嵌套几个$.each 循环来解析数据并将其推送到必要的数组中，并填充每个对象的“名称”:

    $.getJSON('http://exmaple.com/getdata.php?ID=' + id, function(data) {           
        $.each(data, function(key,value) {
            var series = { data: []};
            $.each(value, function(key,val) {
                if (key == 'name') {
                    series.name = val;
                }
                else
                {
                    $.each(val, function(key,val) {
                        var d = val.split(",");
                        var x = Date.UTC(d[0],d[1],d[2]);
                        series.data.push([x,d[3]]);
                    });
                }
            });
            options.series.push(series);
        });

在上面的代码之后，还需要对图表进行实例化:

var chart = new Highcharts.Chart(options);

应该就是这样了!

希望其他人发现这个答案很有用，并且不需要为了弄清楚这个问题而绞尽脑汁好几天。 :-)

关于php - ajax/json 和 PHP 的 Highcharts 数据系列问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8058136/