使用類型柱形圖在 highchart.js 中循環數據

Question

我有一個數據數組，我希望它在 data[] 中循環以使用Highchart.js圖表類型為column呈現圖表。

當從控制器傳遞數據到視圖時，我使用下面的代碼打印了圖形，但現在由於數據來自 ajax 請求，我如何處理數據以制作圖形。

我創建了一個results數組並遍歷每個數據並將結果推入結果並將其直接傳遞給generateGraph函數中的數據，但該圖不起作用。

我正在使用 ajax 請求來獲取數據並將其傳遞給為生成圖形定義的函數，下面是我的數組數據格式。

Ajax request

$.ajax({
    url : someurl,
    dataType: "json",
    method: 'post',
    beforeSend: function() {
        $("#loader").show();
    },
    success: function( data ) {
        $("#loader").hide();
        generateGraph(data);
    }
});

array data

[
    {
        name: "Bestozyme",
        number: "1",
    },
    {
        name: "Sinarest-PD",
        number: "1",
    },
    {
        name: "Azithral",
        number: "1",
    },
    {
        name: "Lecope-M-Kid",
        number: "1",
    },
    {
        name: "Calpol (250 MG)",
        number: "1",
    },
    {
        name: "Calapure",
        number: "1",
    },
] 

using php code in series - 數據通過控制器的渲染視圖傳遞。

series: [{
    name: 'Medicine',
    color: '#F15C80',
    data: [
        <?php    
        foreach($data['medicine'] as $medi){
        ?>
            ['<?php echo $medi['name'];?>',<?php echo $medi['number'];?>], 
        <?php
        }
        ?>        
        
    ],
    dataLabels: {
        enabled: true,
        rotation: -90,
        color: '#FFFFFF',
        align: 'right',
        format: '{point.y}', // one decimal
        y: 10, // 10 pixels down from the top
        style: {
            fontSize: '13px',
            fontFamily: 'Verdana, sans-serif'
        }
    }
}]

highchart.js

function generateGraph(item){
    let results=[];
    item.forEach((val) => {
        results.push([val.name,val.number])
    });
    
    Highcharts.chart('medicine', {
        chart: {
            type: 'column'
        },
        title: {
            text: ' '
        },
        xAxis: {
            type: 'category',
            labels: {
                rotation: -45,
                style: {
                    fontSize: '13px',
                    fontFamily: 'Verdana, sans-serif'
                }
            }
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Medicine'
            }
        },
        legend: {
            enabled: false
        },
        tooltip: {
            pointFormat: '<b>{point.y}</b>'
        },
        series: [{
            name: 'Medicine',
            color: '#F15C80',
            data: results,
            dataLabels: {
                enabled: true,
                rotation: -90,
                color: '#FFFFFF',
                align: 'right',
                format: '{point.y}', // one decimal
                y: 10, // 10 pixels down from the top
                style: {
                    fontSize: '13px',
                    fontFamily: 'Verdana, sans-serif'
                }
            }
        }]
    });
}

Answer 1

請注意，Highcharts 需要數字格式的y數據值，而不是字符串。 試試這個方法：

let results=[];
item.forEach((val) => {
    results.push([val.name, parseInt(val.number)])
});

演示： https : //jsfiddle.net/BlackLabel/Lds9cyau/