Question

我正在我的mvc应用程序中实现highcharts。在这里我从控制器获得Json，json就是这样：

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

我正在使用以下功能来显示图表，我需要在Month和xAxis.categories Home_Page_View中解析series.data。

$(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

您可以使用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

Answer 2

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

在Ajax Post中解析Json数据

2 个答案: