javascript - 用 highchart 绘制动态数组数据结构

问题描述

我有一个关于从高图中绘制动态数据的问题。我有来自 ajax 的数据，我希望将它绘制在我的 highcharts 中。

这是我所做的：

function case_category_adoption() {
     let series_cases_adopt = [];
     $.ajax({
        url: baseurl+'user/get_case_category_adoption_distribution',
        type: 'POST',       
        success: function(response) {
            const results = JSON.parse(response);                                
            let res_array = [];
            for (const result of results) {                
                res_array["data"] = result.case_name;
                res_array["count"] = parseInt(result.cases_count);
                series_cases_adopt.push(res_array);
            }


            let chart_adoption_case_cat = Highcharts.chart('container-case-cat-adoption', {
                chart: {
                    type: 'column'
                },
                title: {
                    text: 'World\'s largest cities per 2017'
                },
                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 2017: <b>{point.y:.1f} millions</b>'
                },
                series: [{
                    name: 'Population',
                    data: series_cases_adopt,
                    // data: [
                    //         ['Shanghai', 24.2],
                    //         ['Beijing', 20.8],
                    //         ['Karachi', 14.9],
                    //         ['Shenzhen', 13.7],
                    //         ['Guangzhou', 13.1],
                    //         ['Istanbul', 12.7],
                    //         ['Mumbai', 12.4],
                    //         ['Moscow', 12.2],
                    //         ['São Paulo', 12.0],
                    //         ['Delhi', 11.7],
                    //         ['Kinshasa', 11.5],
                    //         ['Tianjin', 11.2],
                    //         ['Lahore', 11.1],
                    //         ['Jakarta', 10.6],
                    //         ['Dongguan', 10.6],
                    //         ['Lagos', 10.6],
                    //         ['Bengaluru', 10.3],
                    //         ['Seoul', 9.8],
                    //         ['Foshan', 9.3],
                    //         ['Tokyo', 9.3]
                    //     ],
                    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'
                        }
                    }
                }]
            });

        }
    });
}

我试图制作一个数组以适应 highchart 数据示例，但它不起作用。当我尝试检查series_cases_adoptarray 的值时，这是日志：

(4) […]

0: []

count: 0

data: "Trafficked"

length: 0

<prototype>: Array []

1: []

count: 0

data: "Trafficked"

length: 0

<prototype>: Array []

2: []

count: 0

data: "Trafficked"

length: 0

<prototype>: Array []

3: []

count: 0

data: "Trafficked"

length: 0

<prototype>: Array []

标签： javascriptarraysjsondynamichighcharts

这里：

for (const result of results) {                
    res_array["data"] = result.case_name;
    res_array["count"] = parseInt(result.cases_count);
    series_cases_adopt.push(res_array);
}

您正在创建一个带有键的数组，您需要创建一个带有索引值的基本数组：

for (const result of results) {
    series_cases_adopt.push([
        result.case_name,
        parseInt(result.cases_count)
    ]);
}

现场演示：http: //jsfiddle.net/BlackLabel/vncoebmx/

javascript - 用 highchart 绘制动态数组数据结构

问题描述

解决方案

推荐阅读