扩展的Highcharts Boxplot包括均线-如何在调整大小时删除多余的线?

时间:2018-10-15 13:37:55

标签: javascript highcharts boxplot

我已经扩展了'drawPoints'原型,以便在docsthis fiddle之后在箱线图中添加均线。

(function (H) {

    H.seriesTypes.boxplot.prototype.pointArrayMap = ['low', 'q1', 'median', 'q3', 'high', 'mean'];

    H.seriesTypes.boxplot.prototype.toYData = function (point) {
        return [point.low, point.q1, point.median, point.q3, point.high, point.mean];
    };

    H.wrap(H.seriesTypes.boxplot.prototype, 'drawPoints', function (p) {
        p.call(this);
        var chart = this.chart,
            r = chart.renderer,
            xAxis = this.xAxis,
            yAxis = this.yAxis,
            x, y;

        H.each(this.points, function (p, i) {
            x = p.shapeArgs.x;
            y = p.meanPlot;

            if (p.meanPlotX) {
                p.meanPlotX.attr({
                    d: ['M', x, y, 'L', x + p.shapeArgs.width, y]
                });
            } else {
                p.meanPlotX = r.path(['M', x, y, 'L', x + p.shapeArgs.width, y]).attr({
                    stroke: 'black',
                        'stroke-width': 2
                }).add(p.series.group);
            }

        });
    });

})(Highcharts)

但是,调整窗口大小(或触发重新绘制的其他事件)时,不会删除并重绘中线。

如何确保在自定义项中正确添加了多余的行,以便在调整大小和其他事件时正确删除多余的行?

1 个答案:

答案 0 :(得分:0)

在大多数图表修改情况下,您的自定义代码看起来都可以正常工作。尝试删除某些要点时,我注意到了主要问题:http://jsfiddle.net/BlackLabel/n6dcez2h/

您应将生成的行添加到p.graphic

        H.each(this.points, function (p, i) {
            x = p.shapeArgs.x;
            y = p.meanPlot;

            if (p.meanPlotX) {
                p.meanPlotX.attr({
                    d: ['M', x, y, 'L', x + p.shapeArgs.width, y]
                });
            } else {
                p.meanPlotX = r.path(['M', x, y, 'L', x + p.shapeArgs.width, y]).attr({
                    stroke: 'black',
                        'stroke-width': 2
                }).add(p.graphic); // not p.series.group
            }
        });

实时演示:http://jsfiddle.net/BlackLabel/137q4xmb/