私はHighchartライブラリを使用して棒グラフを開発しています.2つのy軸を作成しました.1つ目はTAM用で、2つ目はシェア用です.Shareはパーセンテージですが、TAMはそうではありません.Share y軸の値については、最大値を100にしました.固定ですが、TAM の場合、値は動的です。
グラフ参照
[http://jsfiddle.net/unidha/vGVRb/45/][1]
タムバーの高さに応じてシェアバーの高さを設定する必要があります。例えば、現在のタムワンは1230万台でシェアワンは70%です。グラフによると、シェアワンは軸があるのでタムワンより背が高いです。ワンズバーの高さ?
それを行うことは可能ですか?これまでの私の理解では、バーの高さは、他のバーの高さに基づいてではなく、y 軸によって決定する必要があります。
参考までに、上記の jsfiddle にあるのと同じコードを次に示します。
$(function () {
$('#container').highcharts({
chart: {
type:'column',
zoomType: 'xy',
alignTicks:false
},
title: {
text: 'Performance Snapshot'
},
xAxis: [{
categories: ['Tam One Share One ', ' Tam Two Share Two '],
//NUR
tickWidth:0
}],
yAxis: [{ // Primary yAxis
labels: {
// format: '{value}%',
style: {
// color: '#89A54E'
color: 'FFFFFF'
},
//NUR
step:2,
y:0
} ,
min: 0,
minRange:0.1,
max:100,
title: {
text: 'Share',
style: {
// color: '#89A54E'
color: '#4572A7'
}
}
}, { // Secondary yAxis
title: {
text: 'Tam',
style: {
color: '#4572A7'
}
},
labels: {
//NUR format: '{value} unit',
style: {
color: '#4572A7'
}
},
opposite: true
}],
tooltip: {
shared: true
},
series: [{
name: 'Tam Unit',
color: '#4572A7',
type: 'column',
yAxis: 1,
data: [12300000, 34400000],
tooltip: {
valueSuffix: ' unit'
},
groupPadding: 0
}, {
name: 'Share',
color: '#89A54E',
type: 'column',
data: [70,40],
tooltip: {
valueSuffix: '%'
},
groupPadding: 0
}]
});
});
ありがとう