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

Answer 2

/// Publishes the maximum value received from the upstream publisher, after it finishes.
/// Available when Output conforms to Comparable.
func max() -> Publishers.Comparison<PassthroughSubject<Output, Failure>>

我通过在系列对象中添加 borderRadius：7 使它起作用。如果您看到任何向下滚动的条形为正方形，只需在相关系列对象内添加此borderRadius。

以下是示例：

http://jsfiddle.net/ht1u0og2/

Highcharts Triple Drilldown Round Corners Plugin Bug

2 个答案: