使用类型柱形图在 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/

使用类型柱形图在 highchart.js 内循环数据

Looping data inside highchart.js using type column chart

javascript

php

highcharts