如何使用 JQPlot 制作 (2) 条形图，其中一个与另一个重叠？

Question

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

如下图所示，我想要前面的蓝色图形（数组 1）和蓝色条后面的橙色条（数组 2）。

  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。

如何使用 JQPlot 制作 (2) 条形图，其中一个与另一个重叠？

How to make (2) Bar Graph with one overlapping with another one, using JQPlot?

jqplot