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相同的exacy只替换了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);
    });
});

我的results.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轴）

像这样的东西

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