Highchart is blank


Highchart is blank

我正试图从mySQL数据创建一个高图。问题是它没有返回任何内容。

到目前为止,我已经在头文件中添加了所需的库。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"type="text/javascript"></script> 
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js">

然后我在我想要显示图表的文件中添加了以下代码。

global $post;
    foreach ($balanceQuery as $row) 
    { 
        $value = $row->balance;
        $datetime = $row->post_date * 1000; // convert from Unix timestamp to JavaScript time
        $data[] = "[$datetime, $value]";
    }
?>
<script type="text/javascript">
var chart = new Highcharts.Chart({
      chart: {
         renderTo: 'container'
      },
      series: [{
         data: [<?php echo join($data, ',') ?>]
      }]
});
</script>

最后我添加了这个html代码:

<div id="container" style="height: 400px; border-bottom: 1px solid #d9d9d9;"></div>

为什么它什么都没显示?

另一个测试:

我现在试着按照它打印图表中的值,但我似乎无法输入日期?

测试:

<script type="text/javascript">
var chartdiv = document.createElement("div");
chartdiv.className = "huge-container";
var seriesOptions = {
        data: [<?php echo join($data, ',') ?>]
 }
var chartOptions = {
     chart: {
         renderTo: 'huge-container',
     },
     series: seriesOptions,
}

var chart = new Highcharts.Chart(chartOptions);
</script>

$data[] = "[$datetime, $value]";

应该是这个

$data = [$datetime, $value];

这个

join($data, ',')

应该是

implode(',', $data)

为了与当前php规范保持一致

我不熟悉您正在使用的图表插件,但这是假设您的$balanceQuery变量已定义并具有查询结果。

尝试在初始化chart之前设置图表选项和系列选项。

var seriesOptions = {
        data: [[<?php echo join($data, ',') ?>],
 }
var chartOptions = {
     chart: {
         renderTo: 'container',
     },
     series: seriesOptions,
}
var chart = new Highcharts.Chart(chartOptions);

此外,请注意@Jacob提出的更改。

将php代码提取为外部文件。然后在内部修改此部分:

$data[] = array($datetime, $value]);

并使用echo json_encode($data);

In the end, in javascript use $.getJSON('path/to/file.php',function(data){
  //load chart
}) 

加载数据并初始化中的图表