最初の 3 つのシリーズが費用を表し、最後のシリーズが収益を表す棒グラフがあります。毎月の損益をパーセンテージで表示したい。以下は、現在のグラフのイメージです。
これが私のコードです。
var s1 = [27362, 45273, 77020, 42059, 23764, 12803];
var s2 = [15920, 30220, 32800, 21900, 19500, 17300];
var s3 = [4100, 1800, 7150, 3600, 2400, 2400];
var s0 = [27208, 46371, 169374, 114879, 35692, 37669];
var ticks = ['March', 'April', 'May', 'June', 'July', 'August'];
$.jqplot.config.enablePlugins = true;
var plot3 = $.jqplot('chart1', [s1, s2, s3, s0], {
stackSeries: true,
animate: true,
seriesDefaults: {
renderer: $.jqplot.BarRenderer,
pointLabels: {
show: true,
location: 'n',
},
rendererOptions: {
fillToZero: true,
barPadding: 0,
barMargin: 0,
barWidth: 55,
barDirection: 'vertical',
},
},
series: [
{
label: 'Equipment',
color: '#c5b47f'
},
{
label: 'Salaries',
color: '#eaa228'
},
{
label: 'O&M',
color: '#4bb2c5'
},
{
label: 'Revenue',
color: '#579575',
disableStack: true
}
],
axesDefaults: {
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
tickOptions: {
fontSize: '13pt'
}
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ticks
},
yaxis: {
}
},
legend: {
show: true,
location: 'e',
placement: 'outside'
}
});
以下のように損益を表示させたい
私はこれを3つの異なるアプローチで達成しようとしています。
1) 最初のアプローチは、pointLabels を使用することです。pointLabel を使用する'stackedValue:true'
と、スタック内のシリーズの個々の値が得られません。第 2 に、pointLabel の位置は積み上げ棒グラフの上であり、グループの上ではありません。
2) 2 番目のアプローチは、トレンドラインを追加することです。しかし問題は、y 軸の値が絶対数であり、傾向線の値がパーセンテージになることです。パーセンテージ系列を同じグラフに表示することは可能ですか?
2) 3 番目のアプローチは、各月の利益または損失の割合を計算し、各月のグラフに div を挿入して表示することです。トリッキーに聞こえますが、実現可能ですか?
あなたの側からの異なるアプローチは大歓迎です。