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

Question

我是 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);
            });
        });

但是不行。在控制器 url (api/Chart/GetLineJson) 之间运行良好。我找不到问题所在。

Answer 1

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

[
    {
        "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示例

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

cannot show json data in line highchart

json

dashboard

highcharts