Как сделать (2) Гистограмма с одним перекрытием с другим, используя JQPlot?

Question

В настоящее время у меня есть этот код для генерации двух баров в одном графике. Но мне нужно присоединиться к двум барам (с одним совпадением с другим). Пожалуйста, помогите скорректировать код с помощью JQPlot.

Как на картинке ниже, мне нужен синий график на передней панели (который является массивом 1) оранжевой полосой (array2) в задней части синей полосы.

var array1 = ["27", "18", "25", "13", "37", "29", "13", "15", "20"] 
    var array2 = ["50", "30", "70", "60", "50", "70", "50", "30", "35"] 

     $.jqplot('barChart', [array1, array2], { 
      title:'Sales & Marketing', 
      animate: true,//!$.jqplot.use_excanvas, 
      seriesDefaults:{ 
       renderer:$.jqplot.BarRenderer, 
       pointLabels: { show: true }, 
       rendererOptions: { 
        showDataLabels: true 
       } 
      }, 
      grid: { 
       drawGridLines: true, 
       gridLineColor: '#A7A7A7', 
       background: '#5F5F5F' 
      }, 
      axes: { 
       xaxis: { 
        renderer: $.jqplot.CategoryAxisRenderer, 
        ticks: salesPersonsArray, 
        tickOptions: { 
         showGridline: false, 
         show: true 
        }, 
        rendererOptions: { 
         drawBaseline: true 
        } 
       }, 
       yaxis: { 
        showTicks : true, 
        min:10, 
        max:100, 
        tickOptions: { 
         showGridline: true 
        }, 
        rendererOptions: { 
         drawBaseline: false 
        } 
       } 
      },    
      highlighter: { show: false } 
     }); 

Спасибо за помощь.

Answer 1

Существует свойство stackSeries, которое может использоваться с гистограммами. Это не совсем то, что вы хотите, как он помещает каждую серию друг на друга, так что с помощью данных, которые вы бы в конечном итоге со следующим:

Обратите внимание на первом баре Всего 75, так как он добавляет 2 бара вместе (25 + 50), тогда как вы хотите, чтобы синяя полоса была равна 25, а желтая полоса была равна 50.

Чтобы исправить это, вы можете добавить функцию для циклизации над массивами 2-й серии и создать третий массив, который является разницей между значениями в array2 и array1

var array3 = []; 
$.each(array2, function(k, v) { 
    // caclulate new value 
    array3.push(array2[k] - array1[k]); 
}); 

затем на графике изобразите первую серию (array1, blue) и новую серию (array3, yellow). Это приведет, что вы после:

См this Fiddle для рабочей демонстрации.