json数据进入highcharts

时间:2014-01-23 22:56:45

标签: javascript json highcharts

对于我的项目,我想使用下面的json文件显示在highcharts中。 由于某种原因,图表保持空白。

我想我需要在某种程度上格式化json部分,但我似乎无法弄清楚如何。 我是新手,所以我希望有人可以用简单的方式向我解释代码。 我如何格式化下面的代码?我想使用colum图表。

[

      {
        "stadsdeel":"A Centrum",
        "veiligheid":18994,
        "leefbaarheid":3822,
        "maatschappelijke integriteit":733,
        "totaal":23549
      },
      {
        "stadsdeel":"B Westpoort",
        "veiligheid":878,
        "leefbaarheid":318,
        "maatschappelijke integriteit":88,
        "totaal":1284
      },
      {
        "stadsdeel":"E West",
        "veiligheid":8648,
        "leefbaarheid":1672,
        "maatschappelijke integriteit":536,
        "totaal":10856
      },
      {
        "stadsdeel":"F Nieuw-West",
        "veiligheid":8673,
        "leefbaarheid":1832,
        "maatschappelijke integriteit":690,
        "totaal":11195
      },
      {
        "stadsdeel":"K Zuid",
        "veiligheid":10065,
        "leefbaarheid":2171,
        "maatschappelijke integriteit":767,
        "totaal":13003
      },
      {
        "stadsdeel":"M Oost",
        "veiligheid":8284,
        "leefbaarheid":1576,
        "maatschappelijke integriteit":511,
        "totaal":10371
      },
      {
        "stadsdeel":"N Noord",
        "veiligheid":5011,
        "leefbaarheid":1324,
        "maatschappelijke integriteit":385,
        "totaal":6720
      },
      {
        "stadsdeel":"T Zuidoost",
        "veiligheid":5031,
        "leefbaarheid":1264,
        "maatschappelijke integriteit":677,
        "totaal":6972
      },
      {
        "stadsdeel":"X onbekend",
        "veiligheid":196,
        "leefbaarheid":46,
        "maatschappelijke integriteit":26,
        "totaal":268
      },
      {
        "stadsdeel":"Amsterdam",
        "veiligheid":65780,
        "leefbaarheid":14025,
        "maatschappelijke integriteit":4413,
        "totaal":84218
      }
    ]

$(document).ready(function() {

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

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

});

1 个答案:

答案 0 :(得分:0)

每个点都需要一个带数值的参数,因为highcharts使用这个参数来计算点的位置。