将JSON加载到Highchart Series

Question

我正在尝试使用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

Answer 1

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

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

我在这里提出了一个有效的解决方案：http://jsfiddle.net/autoboxer/s8symkdz/。

干杯， autoboxer