【问题标题】:HighChart son data is not displaying on webpageHighChart 儿子数据未显示在网页上
【发布时间】:2015-01-10 14:28:22
【问题描述】:

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

我的数据是时间序列数据,保存在./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 
              }
            }

【问题讨论】:

    标签: jquery json highcharts


    【解决方案1】:

    找到了,

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

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

    【讨论】:

      猜你喜欢
      • 2020-06-14
      • 2013-04-05
      • 1970-01-01
      • 2013-02-22
      • 2015-01-29
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多