Highcharts主细节图未呈现第二系列

Highcharts Master Detail Chart not rendering 2nd series

本文关键字：系列细节 Highcharts 更新时间：2023-10-27

我在设置主细节图表时遇到问题。最初，主图和细节图都绘制了线序列和误差条序列。但是，当在主体上选择新范围时，只有"线"会在详图中绘制。（尽管Master仍然同时绘制）

我添加了一个JSFiddle：http://jsfiddle.net/binpower93/za46Y/1/.

我相信这个错误与Highcharts有关，尽管它可能是由以下代码块引起的：

selection: function (event) {
                    var extremesObject = event.xAxis[0],
                        min = extremesObject.min,
                        max = extremesObject.max,
                        detailData = [],
                        xAxis = this.xAxis[0];
                    // reverse engineer the last part of the data
                    jQuery.each(this.series, function (i, series) {
                        var data = [];
                        jQuery.each(series.data, function (i, point) {
                            if (point.x > min && point.x < max) {
                                data.push({
                                    x: point.x,
                                    y: point.y
                                });
                            }
                        });
                        detailData.push(data);
                    });
                    // move the plot bands to reflect the new detail span
                    xAxis.removePlotBand('mask-before');
                    xAxis.addPlotBand({
                        id: 'mask-before',
                        from: firstUTC,
                        to: min,
                        color: 'rgba(0, 0, 0, 0.2)'
                    });
                    xAxis.removePlotBand('mask-after');
                    xAxis.addPlotBand({
                        id: 'mask-after',
                        from: max,
                        to: lastUTC,
                        color: 'rgba(0, 0, 0, 0.2)'
                    });
                    jQuery.each(detailChart.series, function (i, series) {
                        detailChart.series[i].setData(detailData[i]);
                    });
                    return false;
                }
            }
        },

问题是错误序列需要x/y/高/低值，而不仅仅是x/y。所以，当为第二个系列设置数据时，需要计算一些NaN。

解决这个问题的简单方法：

                                data.push({
                                    x: point.x,
                                    y: point.y,
                                    high: point.high,
                                    low: point.low
                                });

固定示例：http://jsfiddle.net/za46Y/2/

小建议：当设置更多数据/添加更多点或系列时，禁用重绘，并调用它们一次，如下所示：

                    jQuery.each(detailChart.series, function (i, series) {
                        series.setData(detailData[i], false);
                    });
                    detailChart.redraw();