Question

这是我在这里的第一个请求，我在同一个问题上阅读了许多其他相关帖子，但我仍然陷入困境，而且我的智慧结束了......所以任何帮助都很多理解！

我在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系列名称（？！？！？！），并且似乎不会显示折线图上的点。

如果我删除双引号并将结果硬编码到系列数组中，它的效果很好（尽管我注意到这个示例似乎没有逗号之间的逗号。

感谢您的帮助......尤其是快速回复！ ; - ）

Answer 1

<强>解决：

我找到了一个终于有效的答案！令人沮丧的是，我花了好几天因为Highcharts没有很好地记录（和/或者我对jQuert和JavaScript的理解仍然处于新手级别）。

答案是不在您的json对象中将X / Y数据作为预先形成的数组发送，而只是发送组成Date的数字（x值）和值（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: []

（我之所以提到这一点是因为我看到了其他答案，其中有不同的做法）。

然后在你的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);

那应该是它！

希望其他人觉得这个答案很有用，并且不需要花费数天时间试图解决这个问题。： - ）

Answer 2

由于Javascript UTC方法将以Integer返回，因此当您在服务器端生成JSON而不是尝试在JSON中传递函数（UTC.Date）时，将Unix时间戳作为整数传递会更好 - 这使得整个JSON无效！

所以

而不是这个

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);         
}

这样做：

while ($item = mysql_fetch_assoc($result)) {            
    $name = $item['Item1'];
    $unix_date = date("Y-m-d", strtotime($item['Item2']));
    $pos = $item['Item3'];

    $arr = array("name"=>$name,"data"=>"[".($unix_date*1000).", ".$pos." ],");
    echo json_encode($arr);         
}

请注意我们将PHP unix时间戳乘以1000以使其与JS兼容。

参考：http://www.w3schools.com/jsref/jsref_utc.asp

Answer 3

只需检查一些Highcharts的示例代码，series需要是一个JSON对象数组，每个对象包含{"name":"Item1","data":"[Date.UTC(2011,11,08), 4 ],"}等。

主要问题是page2的输出，不是数组。

您需要首先修复$ .each，您需要推送value，而不是data：

$.each(data, function(key,value) {
    options.series.push(value);
});

这将正确地将每个项目串联设置为完整的json对象。

然后修复输出：

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

    //I don't think there's supposed to be a comma after this square bracket
    $arr = array("name"=>$name,"data"=>"[Date.UTC(".$date."), ".$pos." ]");
    array_push($output, json_encode($arr));     
}

echo "[";
foreach($output as $val){
    echo $val;
    if($val != end($output)) echo ",";
}
echo "]";

那应该这样做。

Answer 4

在PHP5.5中检查

您可以使用数据系列

将其添加到json中

$date = '31-12-2015 00:00:00';
$datetimeUTC = (strtotime($date) * 1000);
$data[] = [$datetimeUTC, (float) $value];

Answer 5

我遇到了发送由mktime（）生成的时间戳的问题，因为highcharts需要UTC时间而PHP时间戳不是UTC。数据可能会在图表中的错误日显示，因此您还必须考虑时区。

function _convertToUTC($timeStamp) {
    return (int)$timeStamp + (int)date('Z', $timeStamp);
}

代码示例如下：

$serie = array(
    'name' => 'title',
    'data' => array(
        // multiply timestamp by 1000 to get milliseconds
        array(_convertToUTC(mktime(0,0,0,1,1,2016)) * 1000, 15),
        array(_convertToUTC(mktime(0,0,0,2,1,2016)) * 1000, 18),
        array(_convertToUTC(mktime(0,0,0,3,1,2016)) * 1000, 13),
    ),
);
echo json_encode($serie);

使用ajax / json和PHP的Highcharts数据系列问题

5 个答案: