Highcharts条形图与不同的酒吧宽度？ [英] Highcharts bar chart with varied bar widths?

问题描述

我想制作堆叠条形图，其中每个部分都有一个编码一个值的宽度（比如下面的数据中的更改）和一个编码另一个值（共享）的高度。

在某些方面，这就像是一个具有不同分档大小的直方图。有几个直方图问题，但似乎没有解决这个问题。

另一个捕捉高度变化列：

我可以使用图片编辑器将这些文件合并到这个直方图类似的野兽中：

真正抓住辣根的是一笔巨大的交易。所以我的问题是，我可以在Highcharts内做到吗？

解决方案

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

 （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（s​​eriesTypes.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; 
}）; 
 $ b}，
 translate：function（）{
 var series = this，
 totalZ = series.totalZ，
 xAxis = series.xAxis; 
 
 seriesTypes.column.prototype.translate.call（this）; 
 
 //扭曲点以反映z维度
 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/

I want to make stacked bar chart where each portion has a width that encodes one value (say "Change" in the data below) and a height that encodes another value ("Share")

In some ways this is like a histogram with different bin sizes. There are a few "histogram" questions but none seem to address this. Plot Histograms in Highcharts

So given data like this:

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

I can make a stacked bar that captures the "share" column in widths:

And another that captures the "change" column in heights:

And I can use an image editor to combine those into this histogram-like beast:

Which really captures that horseradish is a huge deal. So my question is, can I do that within Highcharts?

解决方案

You can realise that by using snippet.

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

Example: http://jsfiddle.net/highcharts/75oucp3b/

这篇关于Highcharts条形图与不同的酒吧宽度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！