HighCharts json 数据未显示在网页上

Question

由于能够在同一页面上获得工作示例图表，我怀疑未显示所需图表的原因是数据加载（或未加载）的方式。

我的数据是时间序列数据，保存在./json/chartData.json:

[
  {
    "2015-01-08": "35"
  },
  {
    "2015-01-09": "35"
  },
  {
    "2015-01-10": "35"
  }
]

试图显示数据的页面是 template.html 并且包含以下 javascript 我强烈怀疑某处不正确。

  <script type="text/javascript">
$(function () {

            var processed_json = new Array();   
            $.getJSON('json/chartData.json', function(data) {

                // Populate series
                for (i = 0; i < data.length; i++){
                    processed_json.push([data[i].key, parseInt(data[i].value)]);
                }

                // draw chart
                $('#container').highcharts({
                plotOptions: { 
                  series: { 
                    enableMouseTracking: false,
                    shadow: false,
                    animation: false 
                  }
                },  
                chart: {
                    type: "spline"
                },
                title: {
                    text: ""
                },
                xAxis: {
                    allowDecimals: false,
                    title: {
                        text: "Date"
                    }
                },
                yAxis: {
                    title: {
                        text: "Number of tickets"
                    }
                },
                series: [{
                    data: processed_json
                }]
            }); 
        });
    });
</script>

template.html 正文中的容器允许页面呈现图表：

<div id="container" style="min-width: 700px; height: 400px; margin: 0 auto"></div>

请注意，呈现页面后，我将使用 wkhtmltopdf 将页面输出为 pdf 格式。我添加了绘图选项部分，以便 wkhtmltopdf 能够正确渲染它。

            plotOptions: { 
              series: { 
                enableMouseTracking: false,
                shadow: false,
                animation: false 
              }
            }

Answer 1

找到了，

我的 json 格式不正确。应该是：

[
  {
    "key": "2015-01-08",
    "value": "35"
  },
  {
    "key": "2015-01-09",
    "value": "35"
  },
  {
    "key": "2015-01-10",
    "value": "35"
  }
]

HighCharts json 数据未显示在网页上

HighChart son data is not displaying on webpage

jquery

json

highcharts