Question

我正在使用Highcharts在我的html页面上显示一些图表。

用我使用此代码的数据填充图表：

data: [
    ['Shanghai', 23.7],
    ['Lagos', 16.1],
    ['Instanbul', 14.2],
    ['Karachi', 14.0],
    ['Mumbai', 12.5],
    ['Moscow', 12.1],
    ['São Paulo', 11.8],
    ['Beijing', 11.7],
    ['Guangzhou', 11.1],
    ['Delhi', 11.1],
    ['Shenzhen', 10.5],
    ['Seoul', 10.4],
    ['Jakarta', 10.0],
    ['Kinshasa', 9.3],
    ['Tianjin', 9.3],
    ['Tokyo', 9.0],
    ['Cairo', 8.9],
    ['Dhaka', 8.9],
    ['Mexico City', 8.9],
    ['Lima', 8.9]
],

但我想从本地json文件中获取数据，如下所示：

[{
    "X_id": ["baghdadi"],
    "contents.value": ["yassin"],
    "contents.count": [95]
}, {
    "X_id": ["boroumi"],
    "contents.value": ["jamal"],
    "contents.count": [41]
}, {
    "X_id": ["lahia"],
    "contents.value": ["marouane"],
    "contents.count": [36]
}, {
    "X_id": ["essarghini"],
    "contents.value": ["issam"],
    "contents.count": [4]
}, {
    "X_id": ["htiti"],
    "contents.value": ["mustapha"],
    "contents.count": [33]
}, {
    "X_id": ["majdou"],
    "contents.value": ["aimad"],
    "contents.count": [19]
}, {
    "X_id": ["yan"],
    "contents.value": ["mustapha"],
    "contents.count": [33]
}, {
    "X_id": ["jo"],
    "contents.value": ["aimad"],
    "contents.count": [11]
}, {
    "X_id": ["yves"],
    "contents.value": ["mustapha"],
    "contents.count": [33]
}, {
    "X_id": ["tom"],
    "contents.value": ["aimad"],
    "contents.count": [10]
}]

所以这是我试过的代码：

 $(function() {


    var options = {
        chart: {
            type: 'column'
        },
        title: {
            text: 'World\'s largest cities per 2014'
        },
        subtitle: {
            text: 'Source: <a href="http://en.wikipedia.org/wiki/List_of_cities_proper_by_population">Wikipedia</a>'
        },
        xAxis: {
            type: 'category',
            labels: {
                rotation: -45,
                style: {
                    fontSize: '13px',
                    fontFamily: 'Verdana, sans-serif'
                }
            }
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Population (millions)'
            }
        },
        legend: {
            enabled: false
        },
        tooltip: {
            pointFormat: 'Population in 2008: <b>{point.y:.1f} millions</b>'
        },
        series: [{
            name: 'Population',
            data: [],
            dataLabels: {
                enabled: true,
                rotation: -90,
                color: '#FFFFFF',
                align: 'right',
                format: '{point.y:.1f}', // one decimal
                y: 10, // 10 pixels down from the top
                style: {
                    fontSize: '13px',
                    fontFamily: 'Verdana, sans-serif'
                }
            }
        }]
    };

    var series = [];


    $.getJSON("example.json", function(data) {})
        .done(function(data) {
            $.each(data, function(i, item) {
                series.push([item['contents.value'], item['contents.count']])
            });
        })
        .fail(function() {})
        .always(function(data) {});


    options.series[0].data = series;

    $('#container').highcharts(options);

});

但我无法在图表上看到任何内容。

在我按console.log(options.series[0].data);进行修改之前，我试图显示图表数据的内容：

在修改后我只能在控制台中看到[]，当我点击这个对象时，会显示以下内容：

我该如何解决这个问题？

Answer 1

更改此部分：

$.each(data, function(i, item) {
                series.push([item['contents.value'], item['contents.count']])
            });

为：

$.each(data, function(i, item) {
                series.push([item['contents.value'][0], item['contents.count'][0]])
            });

更新

另外，这些行：

options.series[0].data = series;
$('#container').highcharts(options);

需要在done回调中。

在图表中显示json数据

1 个答案:

更新