Highcharts三重下钻圆角插件Bug

Highcharts Triple Drilldown Round Corners Plugin Bug

本文关键字:圆角 插件 Bug 三重 Highcharts      更新时间:2023-09-26

我正在使用Highcharts圆角插件的修改版本,感谢@davcs86。在向下钻取的第三层有一个bug。我希望有人能帮忙。

问题:第三层中钻出错误。

目标: Make it work.

Bug Demo: http://jsfiddle.net/32a7L41b/点击阿拉斯加,然后点击Wave 1,你会看到Bug。显然这些数据不是真实的。

//Modified Highcharts Round Corners plugin
  (function (H) {
        var curPercentage = [];
        H.wrap(H.seriesTypes.column.prototype, 'translate', function (proceed) {
            var options = this.options,
                rTopLeft = options.borderRadiusTopLeft || 0,
                rTopRight = options.borderRadiusTopRight || 0,
                rBottomRight = options.borderRadiusBottomRight || 0,
                rBottomLeft = options.borderRadiusBottomLeft || 0,
                topMargin = options.topMargin || 0,
                bottomMargin = options.bottomMargin || 0;
            proceed.call(this);
            if (rTopLeft || rTopRight || rBottomRight || rBottomLeft) {
                H.each(this.points, function (point) {
                    var iBottomRight = rBottomRight,
                        iBottomLeft = rBottomLeft,
                        iTopRight = rTopRight,
                        iTopLeft = rTopLeft;
                    //console.log(point);
                    if (typeof (curPercentage[point.index]) == 'undefined') {
                        curPercentage[point.index] = 0;
                    }
                    var prevPercentage = curPercentage[point.index];
                    curPercentage[point.index] += 1.0 * parseFloat(point.percentage).toFixed(6);
                    //console.log(prevPercentage);
                    //console.log(curPercentage);
                    if (prevPercentage == 0 & curPercentage[point.index] == 100) {
                        // special case, only one value > 0, preserve all border radius
                        // reset for the next call
                        curPercentage[point.index] = 0;
                    } else if (prevPercentage == 0) {
                        //right side
                        iBottomRight = 0;
                        iBottomLeft = 0;
                    } else if (curPercentage[point.index] == 100) {
                        //left side
                        iTopRight = 0;
                        iTopLeft = 0;
                        // reset for the next call
                        curPercentage[point.index] = 0;
                    } else {
                        // no radius
                        iBottomRight = 0;
                        iBottomLeft = 0;
                        iTopRight = 0;
                        iTopLeft = 0;
                    }
                    var shapeArgs = point.shapeArgs,
                        w = shapeArgs.width,
                        h = shapeArgs.height,
                        x = shapeArgs.x,
                        y = shapeArgs.y;
                    // Preserve the box for data labels
                    point.dlBox = point.shapeArgs;
                    point.shapeType = 'path';
                    point.shapeArgs = {
                        d: [
                            'M', x + iTopLeft, y + topMargin,
                        // top side
                        'L', x + w - iTopRight, y + topMargin,
                        // top right corner
                        'C', x + w - iTopRight / 2, y, x + w, y + iTopRight / 2, x + w, y + iTopRight,
                        // right side
                        'L', x + w, y + h - iBottomRight,
                        // bottom right corner
                        'C', x + w, y + h - iBottomRight / 2, x + w - iBottomRight / 2, y + h, x + w - iBottomRight, y + h + bottomMargin,
                        // bottom side
                        'L', x + iBottomLeft, y + h + bottomMargin,
                        // bottom left corner
                        'C', x + iBottomLeft / 2, y + h, x, y + h - iBottomLeft / 2, x, y + h - iBottomLeft,
                        // left side
                        'L', x, y + iTopLeft,
                        // top left corner
                        'C', x, y + iTopLeft / 2, x + iTopLeft / 2, y, x + iTopLeft, y,
                            'Z']
                    };
                });
            }
        });
    }(Highcharts));

嗯,我必须修改drilldown.js以支持保存在point.dlBox中的数据

Chart.prototype.addSingleSeriesAsDrilldown = function (point, ddOptions) {
    /// (...)
    // Add a record of properties for each drilldown level
    level = {
        levelNumber: levelNumber,
        seriesOptions: oldSeries.options,
        levelSeriesOptions: levelSeriesOptions,
        levelSeries: levelSeries,
        shapeArgs: point.dlBox || point.shapeArgs, // <== here

JSFiddle演示

drilldown: {
    series: [{
    borderRadius: 7, // <----------
    id: 'alaskawaves',
    name: 'Alaska Waves',

我通过在系列对象中添加borderRadius: 7得到了它的工作。如果你看到任何向下钻的条为正方形,只需在相关的系列对象中添加这个borderRadius。

示例:

http://jsfiddle.net/ht1u0og2/