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

Question

我想制作一组条形图，其中包含两组堆叠条形图，这些条形图组合在一起以比较两组堆叠条形图。这应该是表现在以下方式：

我曾经使用过此link

走了，但它并没有帮助我的情节有点像你上面的图片中看到。我甚至尝试发送两个数据集，如[[s1, s2, s3], [s4, s5, s6]]但它没有帮我绘制图表。 有谁知道该怎么做？

任何帮助将不胜感激。 在此先感谢。

Answer 1

设置选项stackSeries: true将为条形图创建所需的显示。

Answer 2

官方来源：

• jqPlot源代码：的 2013年3月27日source code, version 1.0.8r1250。对于此问题，src/jqplot.core.js行2499,2553和2649.
• jqPlot文档：它说API Documentation是最准确的。你还可以看到webpage，README.txt文件， optionsTutorial.txt，jqPlotOptions.txt，jqPlotOptions.txt， jqPlotCssStyling.txt，usage.txt，changes.txt在1.0.8r1250 general release

的jqPlot documentation是不是最新的所以我看了一下source code。不幸的是，没有办法直接将两组条形图与堆叠条形图一起使用。 jqPlot.stackSeries属性只是一个布尔值。它的唯一功能是告诉jqPlot将每个系列堆叠在一起，以获得与不同系列中的值一样多的条。每个系列都绘制了一个值，每个酒吧的第一个系列在底部。换句话说，所有[0]值均绘制在第一个柱状图中，第二个柱状图中的值为[1]等。柱状图中显示的数量是当前系列和所有先前系列的[n]值的总和。没有办法指定有两个或更多个系列的分组。在jqPlot中不存在执行所需功能的功能。

但是你可以完成你的愿望：

是jqPlot本身并不支持你想并不意味着你不能做到这一点的东西，只是你需要得到创造性的事实。

您需要的图形可以看作是两个单独的图形，它们彼此重叠，各个图形上的条形图之间的间距允许其他图形的条形图的足够空间（seriesDefaults.rendererOptions.barMargin）被覆盖给他们。

您可以使用jqPlot创建：

这图有规模，背景和你想要设置为可见网格线。请注意，图中有一个额外的栏。这需要为另一个图形提供的最后一栏提供足够的背景和网格线。

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

该图在jqPlot设置为不可见的规模和网线。

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

背景设定为transparent。请注意，将<div>相对于第一个图定位时，您需要将此图的位置偏移到右侧。

重叠时，你结束了：

然后，您使用空白<div>与背景颜色相同的网页的背景颜色和叠加层覆盖在第一图表额外的酒吧，但在离开第一个图形的背景和网格线足够延伸到第二个图形的最后一个条形。

您将结束：

可以使用jqPlot 1.0.8r1250看到working solution at at JSFiddle。

比较原始请求与该曲线图的最终版制作使用这种方法就可以看到它们是非常接近： 两个最显着的差别之间的是在Y轴之间的空间较大jqPlot版本。不幸的是，似乎没有办法减少堆积条形图的数量。

请注意，此代码生成的图形右侧缺少边框是故意的，因为它在原始请求中不存在。就个人而言，我更喜欢在图表右侧有一个边框。如果更改CSS一点，那就是容易获得： 我图的最佳版本包括在左侧边框和平衡的空白：

你可以看到一个工作JSFiddle of this version。

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

$(document).ready(function() { 
 
    //Numbers derived from desired image 
 
    //var s1 = [10, 29, 35, 48, 0]; 
 
    //var s2 = [34, 24, 15, 20, 0]; 
 
    //var s3 = [18, 19, 26, 52, 0]; 
 
    //Scale to get 30 max on plot 
 
    var s1 = [2, 5.8, 7, 9.6, 0]; 
 
    var s2 = [6.8, 4.8, 3, 4, 0]; 
 
    var s3 = [13.6, 8.8, 3, 7.8, 0]; 
 
    plot4 = $.jqplot('chart4', [s1, s2, s3], { 
 
     // Tell the plot to stack the bars. 
 
     stackSeries: true, 
 
     captureRightClick: true, 
 
     seriesColors: ["#1B95D9", "#A5BC4E", "#E48701"], 
 
     seriesDefaults: { 
 
      shadow: false, 
 
      renderer: $.jqplot.BarRenderer, 
 
      rendererOptions: { 
 
       // jqPlot does not actually obey these except barWidth. 
 
       barPadding: 0, 
 
       barMargin: 66, 
 
       barWidth: 38, 
 
       // Highlight bars when mouse button pressed. 
 
       // Disables default highlighting on mouse over. 
 
       highlightMouseDown: false 
 
      }, 
 
      title: { 
 
       text: '', // title for the plot, 
 
       show: false, 
 
      }, 
 
      markerOptions: { 
 
       show: false, // wether to show data point markers. 
 
      }, 
 
      pointLabels: { 
 
       show: false 
 
      } 
 
     }, 
 
     axes: { 
 
      xaxis: { 
 
       renderer: $.jqplot.CategoryAxisRenderer, 
 
       tickOptions: { 
 
        show: false 
 
       }, 
 
       lastPropertyConvenience: 0 
 
      }, 
 
      yaxis: { 
 
       // Don't pad out the bottom of the data range. By default, 
 
       // axes scaled as if data extended 10% above and below the 
 
       // actual range to prevent data points right on grid boundaries. 
 
       // Don't want to do that here. 
 
       padMin: 0 
 
      } 
 
     }, 
 
     legend: { 
 
      show: false, 
 
      location: 'e', 
 
      placement: 'outside' 
 
     }, 
 
     grid: { 
 
      drawGridLines: true, // wether to draw lines across the grid or not. 
 
      shadow: false, // no shadow 
 
      borderWidth: 1, 
 
      background: 'white', // CSS color spec for background color of grid. 
 
      lastPropertyConvenience: 0 
 
     }, 
 
     lastPropertyConvenience: 0 
 
    }); 
 
}); 
 
    
 
    $(document).ready(function() { 
 
     //Numbers derived from desired image 
 
     //var s1 = [10, 29, 35, 48, 0]; 
 
     //var s2 = [34, 24, 15, 20, 0]; 
 
     //var s3 = [18, 19, 26, 52, 0]; 
 
     //Scale to get 30 max on plot 
 
     var s1 = [2, 5.8, 7, 9.6, 0]; 
 
     var s2 = [6.8, 4.8, 3, 4, 0]; 
 
     var s3 = [3.6, 3.8, 5.2, 10.4, 0]; 
 
     plot4 = $.jqplot('chart5', [s1, s2, s3], { 
 
      // Tell the plot to stack the bars. 
 
      stackSeries: true, 
 
      captureRightClick: true, 
 
      seriesColors: ["#754DE9", "#666666", "#000000"], 
 
      seriesDefaults: { 
 
       shadow: false, 
 
       renderer: $.jqplot.BarRenderer, 
 
       rendererOptions: { 
 
        // jqPlot does not obey these options except barWidth. 
 
        show: true, 
 
        barPadding: 0, 
 
        barMargin: 66, 
 
        barWidth: 38, 
 
        // Highlight bars when mouse button pressed. 
 
        // Disables default highlighting on mouse over. 
 
        highlightMouseDown: false 
 
       }, 
 
       title: { 
 
        text: '', // title for the plot, 
 
        show: false, 
 
       }, 
 
       markerOptions: { 
 
        show: false, // wether to show data point markers. 
 
       }, 
 
       pointLabels: { 
 
        show: false 
 
       } 
 
      }, 
 
      axesDefaults: { 
 
       //show: false  
 
      }, 
 
      axes: { 
 
       xaxis: { 
 
        renderer: $.jqplot.CategoryAxisRenderer, 
 
        tickOptions: { 
 
         show: false 
 
        }, 
 
        lastPropertyConvenience: 0 
 
       }, 
 
       yaxis: { 
 
        show: false, 
 
        // Don't pad out the bottom of the data range. By default, 
 
        // axes scaled as if data extended 10% above and below the 
 
        // actual range to prevent data points right on grid boundaries. 
 
        // Don't want to do that here. 
 
        padMin: 0, 
 
        tickOptions: { 
 
         show: false 
 
        }, 
 
       } 
 
      }, 
 
      legend: { 
 
       show: false, 
 
       location: 'e', 
 
       placement: 'outside' 
 
      }, 
 
      grid: { 
 
       drawGridLines: false, // wether to draw lines across the grid or not. 
 
       shadow: false, // no shadow 
 
       borderWidth: 10, 
 
       background: 'transparent', // CSS color for background color of grid. 
 
       gridLineColor: 'transparent', // *Color of the grid lines. 
 
       borderColor: 'transparent', // CSS color for border around grid. 
 
       lastPropertyConvenience: 0 
 
      }, 
 
      lastPropertyConvenience: 0 
 
     }); 
 
    });

#cover1 { 
 
    padding:0; 
 
    margin: 0; 
 
    background-color: white; 
 
    left: 451px; 
 
    width: 88px; 
 
    /* Uncomment the next three lines to have a border on the right of the graph and 
 
     balanced whitespace:*/ 
 
    /* 
 
    border-left: 2px solid #CCCCCC; 
 
    left:476px; 
 
    width: 62px; 
 
    */ 
 
} 
 
#chart4 .jqplot-xaxis-tick { 
 
    visibility: hidden; 
 
} 
 
#chart5 .jqplot-xaxis-tick { 
 
    visibility: hidden; 
 
} 
 
#chart4 .jqplot-yaxis-tick { 
 
    font: 9px arial 
 
}

<link class="include" rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/jqplot/1.0.8/jquery.jqplot.css" /> 
 

 
<!--[if lt IE 9]><script language="javascript" type="text/javascript" src="http://cdn.jsdelivr.net/excanvas/r3/excanvas.js"></script><![endif]--> 
 
<script class="include" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<!-- Main jqPlot --> 
 
<script class="include" type="text/javascript" src="http://cdn.jsdelivr.net/jqplot/1.0.8/jquery.jqplot.js"></script> 
 
<!-- Additional jqPlot plugins --> 
 
<script class="include" type="text/javascript" src="http://cdn.jsdelivr.net/jqplot/1.0.8/plugins/jqplot.barRenderer.min.js"></script> 
 
<script class="include" type="text/javascript" src="http://cdn.jsdelivr.net/jqplot/1.0.8/plugins/jqplot.categoryAxisRenderer.min.js"></script> 
 

 

 
<div style="position:absolute; left:10px; top:10px;"> 
 
    <div id="chart4" style="width:548px; height:185px;"></div> 
 
    <div id="chart5" style="width:536px; height:185px; top:-185px; left:53px;"></div> 
 
    <div id="cover1" style="position: relative; height: 152px; top:-361px;"></div> 
 
</div>

上面的代码是基于在example page listed in the question。

Answer 3

实用的解决方案...

$(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); 
    } 
); 
}); 

图片：