積み上げ棒の 2 つのグループを比較するために、グループ化された 2 つの積み上げ棒のセットを含む棒グラフを作成したいと考えています。これは次のように表示されます。
私はこのリンクを通過しました
しかし、上の画像のようなものをプロットするのには役立ちませんでした. のような 2 つのデータ セットを送信しようと[[s1, s2, s3], [s4, s5, s6]]しましたが、グラフをプロットするのには役立ちませんでした。誰もそれを行う方法を知っていますか?
どんな助けでも大歓迎です。前もって感謝します。
このオプションを設定するstackSeries: trueと、棒グラフに必要な表示が作成されます。
公式情報源:
src/jqplot.core.js行 2499、2563、および 2649。jqPlotのドキュメントは最新ではないため、ソース コードを調べました。残念ながら、積み上げ棒グラフで 2 セットの棒を直接持つ方法はありません。プロパティはjqPlot.stackSeriesブール値のみです。唯一の機能は、jqPlot に、異なるシリーズに値があるのと同じ数のバーについて、各シリーズを互いの上に積み重ねるように指示することです。各シリーズは、バーごとに 1 つの値がプロットされ、最初のシリーズが一番下になります。つまり、すべての[0]値が最初のバーにプロットされ、[1]バー内に表示される量は、現在のシリーズとそれ以前のすべてのシリーズの [n] 値の合計です。シリーズのグループが 2 つ以上あることを指定する方法はありません。必要なことを実行する機能は、jqPlot には存在しません。
しかし、あなたはあなたが望むものを達成することができます:
jqPlot があなたが望むものをネイティブにサポートしていないという事実は、それができないという意味ではなく、単に創造的になる必要があるということです。
目的のグラフは、2 つの別個のグラフを重ね合わせたものと見なすことができます。個々のグラフの棒の間にはseriesDefaults.rendererOptions.barMargin、他のグラフの棒を横に重ねるのに十分なスペース ( ) を確保するための間隔があります。
jqPlot を使用して以下を作成できます。
そのグラフには、表示したいスケール、背景、およびグリッド線が設定されています。グラフには追加のバーがあることに注意してください。これは、他のグラフによって提供される最後のバーに十分な背景とグリッド線を提供するために必要です。
jqPlot を使用して 2 番目のグラフを作成することもできます。
このグラフには、jqPlot で表示されないように設定されたスケールとグリッド線があります。
seriesDefaults.axes.xaxis.tickOptions.show = false;
seriesDefaults.axes.yaxis.tickOptions.show = false;
etc.
背景は に設定されていますtransparent。<div>最初のグラフを基準にして を配置するときは、このグラフの位置をやや右にオフセットする必要があることに注意してください。
オーバーレイすると、次のようになります。
次に、ウェブページの背景色と同じ背景色の空白を使用<div>し、最初のグラフの余分なバーを覆うオーバーレイを使用しますが、最初のグラフの背景とグリッド線を十分に残して、最後のバーを少し超えて延長します2番目のグラフの。
最終的には次のようになります。
jqPlot 1.0.8r1250 を使用して、JSFiddle で有効なソリューションを確認できます。
元のリクエストとこのメソッドを使用して生成された最終バージョンのグラフを比較すると、それらが非常に近いことがわかります
。2 つの間で最も顕著な違いは、jqPlot バージョンの Y 軸の間のスペースが大きいことです。残念ながら、積み上げ棒グラフでその量を減らすオプションはないようです。
このコードが生成するグラフの右側に境界線がないのは意図的なものであることに注意してください。これは元の要求には存在しなかったためです。個人的には、グラフの右側に境界線がある方が好きです。CSS を少し変更すると、簡単に取得できます。グラフの私の好みのバージョンには、左側に境界線が含まれ、空白のバランスが取れています。
このバージョンの動作中の JSFiddle を確認できます。
全体として、それほど難しいことではありません。もちろん、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>上記のコードは、質問に記載されているサンプル ページのコードに基づいています。