将 JSON 加载到 Highchart 系列答案

【问题标题】：Load JSON to Highchart Series将 JSON 加载到 Highchart 系列
【发布时间】：2026-01-28 18:00:02
【问题描述】：

我正在尝试使用 json 为 xAxis 类别和系列呈现柱形图。遗憾的是没有生成如下图所示的柱形图。

这是我的 JSON 结构（已经在线使用 JSON 验证器进行验证）

{
    "Graph": {
        "Series": [
            {
                "name": "John",
                "data": [
                    "51",
                    "84",
                    "61",
                    "45",
                    "51",
                    "0",
                    "0",
                    "53",
                    "83",
                    "50",
                    "41",
                    "45",
                    "0",
                    "0",
                    "0",
                    "40",
                    "52",
                    "60",
                    "48",
                    "0",
                    "0",
                    "60",
                    "0",
                    "67",
                    "58",
                    "0",
                    "0",
                    "0",
                    "0",
                    "0"
                ]
            },
            {
                "name": "Doe",
                "data": [
                    "1",
                    "0",
                    "0",
                    "1",
                    "0",
                    "0",
                    "0",
                    "0",
                    "0",
                    "0",
                    "0",
                    "0",
                    "0",
                    "0",
                    "0",
                    "0",
                    "1",
                    "0",
                    "0",
                    "0",
                    "0",
                    "0",
                    "0",
                    "0",
                    "0",
                    "0",
                    "0",
                    "0",
                    "0",
                    "0"
                ]
            }
        ],
        "Categories": [
            "1",
            "2",
            "3",
            "4",
            "5",
            "6",
            "7",
            "8",
            "9",
            "10",
            "11",
            "12",
            "13",
            "14",
            "15",
            "16",
            "17",
            "18",
            "19",
            "20",
            "21",
            "22",
            "23",
            "24",
            "25",
            "26",
            "27",
            "28",
            "29",
            "30"
        ]
    }
}

这是我的 javascript

var dchart = {
    chart: {
        type: 'column'
    },
    title: {
        text: ''
    },
    xAxis: {
        categories: []
    },
    yAxis: {
        min: 0,
        title: {
            text: 'Applicants'
        }
    },
    tooltip: {
        headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
        pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                '<td style="padding:0"><b>{point.y}</b></td></tr>',
        footerFormat: '</table>',
        shared: true,
        useHTML: true
    },
    plotOptions: {
        column: {                        
            groupPadding: 0.1,
            pointPadding:0.1,
            events: {
                legendItemClick: function () {
                    return false; 
                }
            }
        },
        series: {
            dataLabels:{
                enabled:true,
                formatter: function() {
                    if(this.y>0){
                        return '<div style="text-align:center; font-family:Arial,Helvetica,sans-serif; font-weight:bold;">' + this.y + '</div>';
                    }
                }
            }
        }
    },
    series: []
}

$.getJSON("<%=request.getContextPath()%>/c/MonthlyGraphAjax?method=ApplicantByDaily", function(data){
    /*xAxis categories*/
    for(var x=0;x<data.Graph.Categories.length;x++){
        dchart.xAxis.categories.push(data.Graph.Categories[x])
    }

    /*series*/
    for(var z=0;z<data.Graph.Series.length;z++){ 
        dchart.series.push(data.Graph.Series[z])
    }
    $("#columnGraphContainer").highcharts(dchart)

})

谁能帮我解决这个问题？我认为下面的代码导致了问题

/*series*/
    for(var z=0;z<data.Graph.Series.length;z++){ 
        dchart.series.push(data.Graph.Series[z])
    }

很抱歉给您带来不便，这里是 jsfiddle 链接，可以清楚地了解我的问题。 Highchart With No Column Bar

【问题讨论】：

请创建一个小提琴

标签： javascript jquery json highcharts

【解决方案1】：

HighCharts 期待数据系列的数值，但收到了字符串，但不知道如何在图表上显示这些值。如果您将输入从 String 类型更改为 Number 类型，它将解决您的问题。

"Series": [
    {
        "name": "John",
         "data": [
             51,
             84,
             61,
             ...
         ]
    }
]

我在这里为您提供了一个可行的解决方案：http://jsfiddle.net/autoboxer/s8symkdz/。

干杯，自动装箱

【讨论】：