无法在行高图中显示json数据

时间:2016-01-10 09:00:06

标签: json highcharts dashboard

我是使用highchart的新手。我有json格式的字符串,我用newtonsoft创建它。此字符串的格式如下所示:

[{"Name":"Month","Data":["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]},{"Name":"Erlang","Data":[50,72,106,129,144,176,136,148,216,194,96,54]}]

我想将其导入javascript中的高级图表。 java脚本代码是:



 $(document).ready(function () {
            var options = {
                chart: {
                    renderTo: 'container',
                    type: 'line',
                    marginRight: 130,
                    marginBottom: 25
                },
                title: {
                    text: 'Erlang',
                    x: -20 //center
                },
                subtitle: {
                    text: '',
                    x: -20
                },
                xAxis: {
                    categories: []
                },
                yAxis: {
                    title: {
                        text: 'Amount'
                    },
                    plotLines: [{
                        value: 0,
                        width: 1,
                        color: '#808080'
                    }]
                },
                tooltip: {
                    formatter: function () {
                        return '<b>' + this.series.Name + '</b><br/>' +
                        this.x + ': ' + this.y;
                    }
                },
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'top',
                    x: -10,
                    y: 100,
                    borderWidth: 0
                },
                series: []
            }

            $.getJSON("../../api/Chart/GetLineJson", function (json) {
                options.xAxis.categories = json[0]['Data'];
                options.series[0] = json[1];
                chart = new Highcharts.Chart(options);
            });
        });
&#13;
&#13;
&#13;

但它不起作用。在控制器URL (api / Chart / GetLineJson)之间运行良好。 我找不到问题所在。

1 个答案:

答案 0 :(得分:0)

您需要将json响应中的NameData键更改为小写。

[
    {
        "name": "Month",
        "data": ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]
    },
    {
        "name": "Erlang",
        "data":[50,72,106,129,144,176,136,148,216,194,96,54]
    }
]

工作jsbin示例