简体   繁体   中英

json data into highcharts

For my project i want to use the json file below to show in the highcharts. For some reason the chart stays empty.

i think i need to format the json part in someway but i cant seem the figure out how. Im pretty new to this, so I hope someone can explain the code to me in a simple way. how do i format the code below? I want to use the colum chart.

[

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

});

每个点都需要具有带数字值的y参数,因为高图使用此参数来计算点的位置。

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM