如何使用Jqplot在同一堆叠条形图中显示两组不同颜色的条形图

我想制作一个条形图，其中有两组堆叠的条形图，它们被分组在一起，以比较两组堆叠的条形图。这应以以下方式显示：

我经历过这一切

但它并没有帮助我画出你在上图中看到的东西。我甚至尝试发送两个数据集，比如

[[s1，s2，s3]，[s4，s5，s6]]

，但这并不能帮助我绘制图表。 有人知道怎么做吗

任何帮助都将不胜感激。

---

提前感谢。

设置选项

stackSeries:true

将为条形图创建所需的显示。

官方来源：

• jqPlot源代码：of 2013-03-27. 对于这个问题，

  src/jqplot.core.js

  第2499、2563和2649行
• jqPlot文档：它说的是最准确的。您还可以看到，README.txt， optionsTutorial.txt、jqPlotOptions.txt、， 中的jqPlotCssStyling.txt、usage.txt、changes.txt

这不是最新的，所以我看了一下。不幸的是，没有办法用堆叠条形图直接获得两组条形图。

jqPlot.stackSeries

属性只是一个布尔值。它唯一的功能是告诉jqPlot将每个系列堆叠在彼此的顶部，以获得不同系列中的值。每个系列的每个条形图绘制一个值，第一个系列位于底部。换句话说，所有

[0]

值都绘制在第一个条形图中，而

[1]

值则绘制在第二个条形图中，以此类推。条形图中显示的金额是当前系列和之前所有系列的[n]值之和。无法指定序列有两个或更多分组。jqPlot中不存在实现所需功能的能力

但你可以实现你的愿望：

jqPlot本身并不支持您想要的东西，这并不意味着您不能这样做，只是您需要获得创造性

您想要的图形可以看作是两个相互重叠的独立图形，每个图形上的条之间有足够的间距（

seriesDefaults.renderoptions.barMargin

），以便将另一个图形中的条重叠在它们旁边

您可以使用jqPlot创建：

该图形具有您希望设置为可见的比例、背景和网格线。请注意，图形中有一个额外的条。这需要为另一个图形提供的最后一个条形图提供足够的背景和网格线

您还可以使用jqPlot创建第二个图形：

此图形的比例和网格线在jqPlot中设置为不可见

seriesDefaults.axes.xaxis.tickOptions.show = false;
seriesDefaults.axes.yaxis.tickOptions.show = false;
etc.

背景设置为透明。请注意，当相对于第一个图形定位

时，需要将此图形的位置稍微向右偏移

覆盖后，您将得到：

然后，使用与网页背景颜色相同的空白

，并覆盖第一个图形上的额外栏，但留下足够多的第一个图形的背景和网格线，使其略超过第二个图形的最后一个栏

您最终将得到：

您可以使用jqPlot 1.0.8r1250看到一个

将原始请求与使用此方法生成的图形的最终版本进行比较，您可以看到它们非常接近： 两者之间最明显的区别是jqPlot版本中Y轴之间的空间更大。不幸的是，对于堆叠条形图，似乎没有减少该数量的选项

请注意，此代码生成的图形右侧缺少边框是故意的，因为它在原始请求中不存在。就我个人而言，我更喜欢在图表的右侧有一个边框。如果稍微更改CSS，则很容易获得： 我喜欢的图形版本在左边有一个边框，并平衡了空格：

你可以看到一个正在工作的人

总而言之，这并不难。当然，如果jqPlot支持多组条形图，这会更容易。希望它在某个时候会出现。然而，最后一个版本是2013年3月27日，此后似乎没有任何开发工作。在此之前，每隔几个月就会发布一次。但是，jqPlot是根据GPL和MIT许可证发布的，因此任何人都可以继续工作

$（文档）.ready（函数（）{
//从所需图像导出的数字
//VarS1=[10,29,35,48,0]；
//VarS2=[34,24,15,20,0]；
//VarS3=[18,19,26,52,0]；
//缩放以在绘图上获得最大30
VarS1=[2,5.8,7,9.6,0]；
VarS2=[6.8,4.8,3,4,0]；
VarS3=[13.6,8.8,3,7.8,0]；
plot4=$.jqplot（'chart4'，[s1，s2，s3]{
//告诉绘图人员堆叠条形图。
斯塔克系列：没错，
captureRightClick:true，
系列颜色：[“1B95D9”、“A5BC4E”、“E48701”]，
系列默认值：{
影子：错，
渲染器：$.jqplot.blunderer，
渲染器选项：{
//jqPlot实际上不遵守这些规定，但barWidth除外。
barPadding:0，
边距：66，
条宽：38，
//按下鼠标按钮时高亮显示栏。
//禁用鼠标悬停时的默认高亮显示。
highlightMouseDown：false
},
标题：{
文本：“”，//绘图的标题，
秀:假,，
},
标记选项：{
show:false，//是否显示数据点标记。
},
点标签：{
节目：假
}
},
轴线：{
xaxis：{
渲染器：$.jqplot.Cate
    $(document).ready(function(){
  var s1 = [2, 0, 0, 10,11,0, 6, 2, 0,10,11];
  var s2 = [7, 0, 0, 4,11,0, 6, 2, 0,10,11];
  var s3 = [4, 0, 0, 7,11,0, 6, 2, 0,10,11];
  var s4 = [0, 20, 0, 0,0,0, 0, 0, 0,0,0];
  plot3 = $.jqplot('chart3', [s1, s2, s3,s4], {
    stackSeries: true,
    captureRightClick: true,
    seriesDefaults:{
      renderer:$.jqplot.BarRenderer,
      rendererOptions: {
          barMargin: 30,
          highlightMouseDown: true   
      },
      pointLabels: {show: true}
    },
    axes: {
      xaxis: {
          renderer: $.jqplot.CategoryAxisRenderer
      },
      yaxis: {
        padMin: 0
      }
    },
    legend: {
      show: true,
      location: 'e',
      placement: 'outside'
    }      
  });
  $('#chart3').bind('jqplotDataClick', 
    function (ev, seriesIndex, pointIndex, data) {
      $('#info3').html('series: '+seriesIndex+', point: '+pointIndex+', data: '+data);
    }
  ); 
});