即使 json 发送了正确的信息，higcharts 中的一个系列名称也不会填充

Question

条形图中的最后一个系列将"Series 4"显示为名称，即使其正确名称来自json文件。

json 文件中的信息来自 SQL 查询，该查询以以下格式的字符串形式打印信息：

[
{"name": "Operation","data": [{"y":3000, "second": 1500, "third": 5}]},
{"name": "Mechanical","data": [{"y":2515, "second": 515, "third": 8}]},
{"name": "Electrical","data": [{"y":1800, "second": 475, "third": 10}]},
{"name": "Operation Slag","data": [{"y":1000, "second": 1500, "third": 7}]}
]

由于系列的颜色是手动设置的，因此我使用以下方法为每个系列添加数据和名称：

jspData.forEach(function(jspData, i) {
    Delays.series[i].setData(jspData.data);
    Delays.series[i].setName(jspData.name);
}];

这正在按预期工作，直到最后一个系列显示"系列 4"名称而不是"操作炉渣"。

$(function () {
    $(document).ready(function(){
        $.getJSON('getData.json', function(jspData) {
            var Delays = new Highcharts.chart({
                chart: {
                    renderTo: 'Delays',
                    type: 'bar'
                },
                xAxis: {
                    categories: [''],
                    lineWidth: 0,
                    minorTickLength: 0,
                    tickLength: 0,
                    gridLineWidth: 0,
                    minorGridLineWidth: 0,
                    title: {
                        text: null
                    }
                },
                yAxis: {
                    gridLineWidth: 0,
                    minorGridLineWidth: 0, 
                    lineWidth: 0,
                    tickWidth: 0,
                    tickLength: 0,
                    min: 0,
                    title: null,
                    labels: {
                        enabled: false,
                    }
                },
                tooltip: {
                    enabled:true,
                    style:{fontSize:'10px', fontFamily:"sans-serif"},
                    formatter: function() {
                            console.log(this);
                            return 'Total duration: ' + this.y + 'min<br/>Delay Code: ' + this.point.second + '<br/>Count of Events: ' + this.point.third;
                    },
                },
                    plotOptions: {
                        bar: {
                            borderWidth: 0.5,
                            dataLabels: {
                                    enabled: true,
                                    format: '{series.name}',
                                    style: {
                                        fontSize: "10px",
                                        fontWeight:'normal',
                                        textOutline: false,
                                        fontFamily: 'sans-serif',
                                    },
                                }
                            },
                        series: {
                            groupPadding: 0,
                            pointPadding: 0,
                        },
                    },
                    legend:{
                        enabled:false,
                    },
                    series: [{
                       color:'#4572A7',
                       data: []
                    }, {
                      color:'#89A54E',
                      data: []
                   }, {
                     color:'#AA4643', 
                     data: []
                   }, {
                    color:'#A1745B',
                    data: []
                   }],

            });
                    jspData.forEach(function(jspData, i) {
                        Delays.series[i].setData(jspData.data);
                        Delays.series[i].setName(jspData.name);

                    }); 
        });
    });
});

最后一个系列名称不应为"系列4"，而应为"渣操作"。图表呈现，所有其他数据都已正确填充。

Answer 1

setName 方法是内部的，需要重绘图表。在您的情况下，更改调用顺序就足够了，因为setData会导致redraw：

jspData.forEach(function(jspData, i) {
    Delays.series[i].setName(jspData.name);
    Delays.series[i].setData(jspData.data);
});

现场演示：http://jsfiddle.net/BlackLabel/0qkf26zp/

API：https://api.highcharts.com/class-reference/Highcharts.Series#setData