javascript - Highcharts Triple Drilldown Round Corners 插件错误

Question

感谢 @davcs86，我正在使用 Highcharts Round Corners 插件的修改版本。在向下钻取的第三层有一个错误。我希望有人能提供帮助。

问题:第三层向下钻取错误。

目标:让它发挥作用。

错误演示: http://jsfiddle.net/32a7L41b/单击 Alaska，然后单击 Wave 1，您将看到错误。显然数据不是真实的。

//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));

Answer 1

好吧，我不得不修改 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 demo