解析 Json 中的数据 Ajax Post

Question

我正在我的 mvc 应用程序中实现 highcharts。在这里我从 Controller 得到 Json json 是这样的：

[
    {
        "Admin_Count_ID": 1,
        "Home_Page_View": 15,
        "Month": "Jan"
    },
    {
        "Admin_Count_ID": 4,
        "Home_Page_View": 2,
        "Month": "Feb"
    }
]

我正在使用下面的函数来显示图表，我需要解析 xAxis.categories 中的 Month 和 series.data 中的 Home_Page_View。

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: 'Monthly Website User View'
        },

        xAxis: {
            categories: ['Jan', 'Feb']
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Users'
            }
        },
        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:.1f}</b></td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true
        },
        plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0
            }
        },
        series: [{
            name: 'Users',
            data: [5, 15]

        }]
    });
});

请帮助我。提前致谢

Answer 1

var obj = [{"Admin_Count_ID":1,"Home_Page_View":15,"Month":"Jan"},{"Admin_Count_ID":4,"Home_Page_View":2,"Month":"Feb"}];

var month = [];
var view = [];
$.each(obj,function(index,val){
    month.push(val.Month);
    view.push(val.Home_Page_View);
});

在你的 highCharts 中这样写

 xAxis: {
            categories: month
        },
series: [{
        name: 'Users',
        data: view
    }]

Demo

Answer 2

您可以使用 for 循环构建所需的数组：

// assumes 'json' = the data retrieved
var months = [], views = [];
for (var i = 0; i < json.length; i++) {
    months.push(json[i].Month);
    views.push(json[i].Home_Page_View)
}

然后您可以在 highcharts 初始化中使用这些值（省略额外属性）：

$('#container').highcharts({
    xAxis: {
        categories: months
    },
    series: [{
        data: views
    }]
});

Example fiddle

解析 Json 中的数据 Ajax Post

Parse Json Data in Ajax Post

jquery

json

highcharts