Highchart没有't显示图形:在序列中添加javascript数组时出错

Highchart doesn't show the graph : error adding javascript array in series

本文关键字:添加 javascript 出错 数组 没有 图形 显示图 显示 Highchart      更新时间:2023-09-26

我正在使用柱状图绘制人口信息。我使用Ajax调用获取数据,并将它们存储在数组中

 $(document).ready(function(){
        var url = 'zone.php';
        var zone_name = [];
        var male_pop = [];
        var female_pop = [];
        $.getJSON(url, function(data) {
            $.each(data, function(index, data) {
                zone_name.push(data.name);
                male_pop.push(parseInt(data.pop_male));
                female_pop.push(parseInt(data.pop_female));
            });
        });

当我使用这些数据绘制图形时,图形不会显示出来。

$('#chart').highcharts({
            chart: {
                type: 'bar'
            },
            title: {
                text: 'Popolution of Nepal zone wise'
            },
            subtitle: {
                text: 'Source: cbs.gov.np'
            },
            xAxis: {
                categories: zone_name,
                title: {
                    text: null
                }
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Population',
                    align: 'high'
                },
                labels: {
                    overflow: 'justify'
                }
            },
            tooltip: {
                valueSuffix: ''
            },
            plotOptions: {
                bar: {
                    dataLabels: {
                        enabled: true
                    }
                }
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'top',
                x: -100,
                y: 100,
                floating: true,
                borderWidth: 1,
                backgroundColor: '#FFFFFF',
                shadow: true
            },
            credits: {
                enabled: false
            },
            series: [{
                name: 'Male Population',
                data: male_pop
            }, {
                name: 'Female Population',
                data: female_pop
            }, {
                name: 'Total Population',
                data:  male_pop
            }]
        });
        });

错误在series部分。分配data: male_pop不起作用。我该如何克服这个错误?

EDIT:控制台上male_pop数组的输出为

0: 676960
1: 1122885
2: 990638
3: 1401822
4: 1939350
5: 1500452
6: 706243
7: 1344568
8: 241786
9: 195827
10: 831283
11: 679340
12: 754277
13: 463610

我想问题是由于$.getJSON的性质,当您在那之后调用:$('#chart').highcharts({时,服务器的响应还没有到达。尝试将其更改为:

$.getJSON(url, function(data) {
            $.each(data, function(index, data) {
                zone_name.push(data.name);
                male_pop.push(parseInt(data.pop_male));
                female_pop.push(parseInt(data.pop_female));
            });
        //    $('#chart').highcharts({
        });