如何使用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); 
    } 
); 
}); 

圖片：