Гитарная диаграмма Highcharts с разной шириной штрихов?

Question

Я хочу сделать столбчатую диаграмму, где каждая часть имеет ширину, которая кодирует одно значение (скажем, «Смена» в приведенных ниже данных) и высоту, которая кодирует другое значение («Share»)

В некотором смысле это как гистограмма с различными размерами ящиков. Есть несколько «гистограммных» вопросов, но, похоже, никто не обращается к этому. 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 

я могу сделать столбчатое, который фиксирует колонку «доля» в ширине:

и другое, который захватывает колонну «изменений» в высоте :

И я могу использовать редактор изображений, чтобы объединить тех, кто в этом histog ползунковые, как зверь:

Который действительно захватывает, что хреновый огромное дело. Итак, мой вопрос: могу ли я сделать это в 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/