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"
  }
]

HighChart子数据未显示在网页上

1 个答案: