Highcharts 和 Json 数据

Question

我最近一直在尝试学习使用 Highctarts.js，但遇到了一个小问题。

当我使用他们的示例代码和他们的示例 data.json 文件时，它可以工作。但是，当我用我自己的替换他们的 json 文件时它不起作用，我做错了什么？

Highchart JS

$(document).ready(function() {

    var options = {
        chart: {
            renderTo: 'container',
            type: 'spline'
        },
        series: [{}]
    };

    $.getJSON('data.json', function(data) {
        options.series[0].data = data;
        var chart = new Highcharts.Chart(options);
    });
});

Highchart data.json

[
[1,12],
[2,5],
[3,18],
[4,13],
[5,7],
[6,4],
[7,9],
[8,10],
[9,15],
[10,22]
]

这会成功生成页面加载图表。

我的代码没有，有什么问题吗？

我的 JS（与上面的 Highchart.js 完全相同，只是替换了 json 文件）

$(document).ready(function() {

    var options = {
        chart: {
            renderTo: 'container',
            type: 'spline'
        },
        series: [{}]
    };

    $.getJSON('results.json', function(data) {
        options.series[0].data = data;
        var chart = new Highcharts.Chart(options);
    });
});

我的结果.json

[
  {
    "Month": "January",
    "Count": 162690
  },
  {
    "Month": "February",
    "Count": 109986
  },
  {
    "Month": "March",
    "Count": 145303
  },
  {
    "Month": "April",
    "Count": 116949
  },
  {
    "Month": "May",
    "Count": 253523
  },
  {
    "Month": "June",
    "Count": 51920
  }
]

我用来生成 json 的 monthConn.php 页面代码如下 - 也许我没有正确创建 results.json？；

$stmt = $conn -> prepare("SELECT 
                            MONTHNAME(TimeStamp), direction, COUNT(*)
                        FROM
                            transactions
                                WHERE TimeStamp BETWEEN '2014-01-01' AND '2014-12-31'
                        GROUP BY EXTRACT(MONTH FROM TIMESTAMP);");

$stmt -> execute();

$stmt -> bind_result($month, $count);

while ($stmt -> fetch()) {
$data[] = array(
            'Month' => $month,
            'Count' => $count
      );
    }

$stmt->close();

file_put_contents("results.json", json_encode(($data)));

最好是条形图

• 底部的月份（x 轴）

• 向左计数（y 轴）

某事like this

Answer 1

我又看了一遍，发现 Highchart 选项的格式不正确。

我在这里创建了一个工作示例。 http://jsfiddle.net/z9mgt4r6/

$(function () {
    $.getJSON('http://mockbin.org/bin/bd057e57-36e7-4d24-a238-32d19fc23d2c', function (data) {
        var options = {
            title: {text: 'Title'},
            subtitle: {text: 'Subtitle'},
            xAxis: {categories: []},
            yAxis: {title: {text: 'Count'}},
            series: [{name: 'Count', data: []}]
        };
        for (var i = data.length - 1; i >= 0; i--) {
            options.xAxis.categories.push(data[i].Month);
            options.series[0].data.push(data[i].Count);
        };
        $('#container').highcharts(options);
    });
});