如何在Highcharts的3D散点图中更改气泡的大小?

时间:2016-04-13 04:59:12

标签: highcharts

我需要通过在Highcharts' 3D scatter chart中的数据点中提供第4个值来更改气泡(点)的大小。我找不到任何方法如何做到这一点。有人可以帮忙吗?

1 个答案:

答案 0 :(得分:3)

似乎不支持开箱即用。虽然在此Thread in the Highcharts-Forum中,会显示一个包装器,允许将第4个w值用作气泡的大小(请参阅http://jsfiddle.net/uqLfm1k6/1/):

(function (H) {
    H.wrap(H.seriesTypes.bubble.prototype, 'getRadii', function (proceed, zMin, zMax, minSize, maxSize) {
        var math = Math,
            len,
            i,
            pos,
            zData = this.zData,
     wData = this.userOptions.data.map( function(e){ return e.w }),      // ADDED
            radii = [],
            options = this.options,
            sizeByArea = options.sizeBy !== 'width',
            zThreshold = options.zThreshold,
            zRange = zMax - zMin,
            value,
            radius;

        // Set the shape type and arguments to be picked up in drawPoints
        for (i = 0, len = zData.length; i < len; i++) {
     // value = zData[i];                  // DELETED
     value = this.chart.is3d()? wData[i] : zData[i];   // ADDED

            // When sizing by threshold, the absolute value of z determines the size
            // of the bubble.
            if (options.sizeByAbsoluteValue && value !== null) {
                value = Math.abs(value - zThreshold);
                zMax = Math.max(zMax - zThreshold, Math.abs(zMin - zThreshold));
                zMin = 0;
            }

            if (value === null) {
                radius = null;
            // Issue #4419 - if value is less than zMin, push a radius that's always smaller than the minimum size
            } else if (value < zMin) {
                radius = minSize / 2 - 1;
            } else {
                // Relative size, a number between 0 and 1
                pos = zRange > 0 ? (value - zMin) / zRange : 0.5;

                if (sizeByArea && pos >= 0) {
                    pos = Math.sqrt(pos);
                }
                radius = math.ceil(minSize + pos * (maxSize - minSize)) / 2;
            }
            radii.push(radius);
        }
        this.radii = radii;
    });
}(Highcharts));