Question

我想制作堆积条形图，其中每个部分的宽度都编码一个值（比如说＆＃34;更改＆＃34;在下面的数据中）和一个编码另一个值的高度（＆＃34; Share＆＃34 ;）

在某些方面，这就像具有不同箱尺寸的直方图。有一些＆＃34;直方图＆＃34;问题似乎没有解决这个问题。 Plot Histograms in Highcharts

所以给出这样的数据：

Category        Share   Price Change
Apples          14.35   0.1314192423
Horseradish     46.168  0.1761474117
Figs            2.871   0.018874249
Tomatoes        13.954  0.0106121298
Mangoes         7.264   0.1217297011
Raisins         5.738   0.0206787136
Eggplant        6.31    0.0110160732
Other produce   3.344   0.0945377722

我可以制作一个可以捕捉＆＃34;分享＆＃34;宽度列：

另一个捕获＆＃34;变化＆＃34;列高：

我可以使用图像编辑器将这些编辑器组合成类似直方图的野兽：

真正捕捉到辣根是一件大事。所以我的问题是，我可以在Highcharts中做到吗？

Answer 1

您可以通过使用代码段来实现这一点。

 (function (H) {
    var seriesTypes = H.seriesTypes,
        each = H.each,
        extendClass = H.extendClass,
        defaultPlotOptions = H.getOptions().plotOptions,
        merge = H.merge;

    defaultPlotOptions.marimekko = merge(defaultPlotOptions.column, {
        pointPadding: 0,
        groupPadding: 0
    });

    seriesTypes.marimekko = extendClass(seriesTypes.column, {
        type: 'marimekko',
        pointArrayMap: ['y', 'z'],
        parallelArrays: ['x', 'y', 'z'],
        processData: function () {
            var series = this;
            this.totalZ = 0;
            this.relZ = [];
            seriesTypes.column.prototype.processData.call(this);

            each(this.zData, function (z, i) {
                series.relZ[i] = series.totalZ;
                series.totalZ += z;
            });

        },
        translate: function () {
            var series = this,
                totalZ = series.totalZ,                
                xAxis = series.xAxis;

            seriesTypes.column.prototype.translate.call(this);

            // Distort the points to reflect z dimension
            each(this.points, function (point, i) {
                var shapeArgs = point.shapeArgs, 
                    relZ = series.relZ[i];
                shapeArgs.x *= (relZ / totalZ) / (shapeArgs.x / xAxis.len);
                shapeArgs.width *= (point.z / totalZ) / (series.pointRange / series.xAxis.max); 
            });
        }
    });

}(Highcharts));

示例：http://jsfiddle.net/highcharts/75oucp3b/

具有不同条宽的Highcharts条形图？

1 个答案: