如何使用JQPlot制作（2）与另一个重叠的条形图？

Question

目前我正在使用此代码在单个图形中生成两个条形图。但我需要加入两个栏（一个与另一个重叠）。请帮助使用JQPlot进行代码调整。

如下图所示，我希望前面的蓝色图形（即array1）是蓝色条背面的橙色条形图（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，蓝色）和新系列（array3，黄色）。这将导致您的目标：

有关正常工作的演示，请参阅this Fiddle。