ゲージ バンドにツールチップまたは凡例を表示したいと考えています。私は次のようにバンドを描きます：
plotBands: [{
from: 0,
to: 10,
color: '#55BF3B'
}, {
from: 10,
to: 20,
color: '#DDDF0D'
}]
バンドのマウスオーバーでツールチップを表示したいと思います。
または、私が望む他の解決策は、関連する色で各バンドの凡例を表示することです。ポイントの凡例にはオプションがありますが、バンドにはありません。
showInLegend:trueplotBands のようなオプションはありますか? またはこれらを取得するための他の解決策はありますか？
（たとえば）不可能なので、チャートの下に（私の場合はゲージ）を配置できますsubtitle。例えば：
subtitle: {
text: '<span style="background-color: #55BF3B; border-radius: 2px; padding: 1px 2px;">' +
'0-10' +
'</span>' +
'<span style="background-color: #DDDF0D; border-radius: 2px; padding: 1px 2px;">' +
'10-20' +
'</span>',
useHTML: true,
verticalAlign: 'bottom'
}
Highcharts によって生成された svg パス要素にテキストを添付することで、ゲージ プロットバンドの非常に洗練されたラベルを作成することが実際に可能です。これにより、プロットバンドの曲線に実際に沿ったテキストを取得できます。具体的には、ゲージが初期化された後にトリガーされる匿名関数のコードを見てください。正しい plotband オブジェクトを取得し、パス要素に id 属性を割り当ててから、(createElementNS を使用して) text 要素と textPath 要素を挿入する必要があります。次に、xlink 名前空間を使用して、新しく作成した textPath 要素をリンクします。私の例では、ゲージの周囲にプロットバンドとして表示される四分位数にラベルを適用しています。
例：
$(selector).highcharts({
chart: {
type: 'gauge',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
//oConfig is my own config object
text: oConfig.TITLE,
style: {"color": "#333333", "fontSize": fontSize, "font-family": "Arial", "font-weight": "bold"}
},
pane: {
size: "100%",
startAngle: -150,
endAngle: 150,
background: [{
backgroundColor: '#FFF',
borderWidth: 0,
outerRadius: '100%',
innerRadius: '100%'
}]
},
/*the value axis*/
yAxis: [{
min: oConfig.MIN,
max: oConfig.MAX,
minorTickInterval: 'auto',
minorTickWidth: 0,
minorTickLength: 10,
minorTickPosition: 'inside',
minorTickColor: '#666',
tickPixelInterval: 30,
tickWidth: 2,
tickPosition: 'inside',
tickLength: 10,
tickColor: '#666',
labels: {
step: 2,
rotation: 'auto'
},
title: {
text: null
},
plotBands: [{
from: oConfig.PB1FROM,
to: oConfig.PB1TO,
color: 'red',
outerRadius: "105%",
//innerRadius: "10%",
thickness : "5%"
}, {
from: oConfig.PB2FROM,
to: oConfig.PB2TO,
color: '#fdd01b',
outerRadius: "105%",
//innerRadius: "10%",
thickness : "5%"
}, {
from: oConfig.PB3FROM,
to: oConfig.PB3TO,
color: 'green',
outerRadius: "105%",
//innerRadius: "10%",
thickness : "5%"
}]
}],
credits: {
enabled: false
},
series: [{
name: name,
data: []/*,
tooltip: {
valuePrefix: 'Score: ',
valueSuffix: ' out of 5'
}*/
}]
},
//Add some life
function (chart) {
var svgNS = "http://www.w3.org/2000/svg";
var xlinkNS = "http://www.w3.org/1999/xlink";
//I create a random id using my own helpers.makeid() method - you'll need to roll your own
var id = helpers.makeid();
//quartile 1
var elem = chart.yAxis[0].plotLinesAndBands[1].svgElem.element;
elem.setAttribute("id", id);
var newText = document.createElementNS(svgNS,"text");
newText.setAttributeNS(null,"font-family","Verdana");
newText.setAttributeNS(null,"font-weight","bold");
newText.setAttributeNS(null,"font-size","10");
newText.setAttributeNS(null,"dy","-5");
newText.setAttributeNS(null,"fill","red");
var newTextPath = document.createElementNS(svgNS, "textPath");
newTextPath.setAttributeNS(null,"startOffset","10%");
newTextPath.setAttributeNS(xlinkNS, "xlink:href", "#"+id);
var textNode = document.createTextNode("Quartile 1 (0% to 25%)");
newTextPath.appendChild(textNode);
newText.appendChild(newTextPath);
elem.parentNode.insertBefore(newText, elem.nextSibling);
//interquartile range (middle 50)
var elem2 = chart.yAxis[0].plotLinesAndBands[2].svgElem.element;
id = helpers.makeid();
elem2.setAttribute("id", id);
var newText = document.createElementNS(svgNS,"text");
newText.setAttributeNS(null,"font-family","Verdana");
newText.setAttributeNS(null,"font-weight","bold");
newText.setAttributeNS(null,"font-size","10");
newText.setAttributeNS(null,"dy","-5");
newText.setAttributeNS(null,"fill","#fdd01b");
newText.setAttributeNS(null,"x", 5);
newText.setAttributeNS(null,"y", 5);
var newTextPath = document.createElementNS(svgNS, "textPath");
newTextPath.setAttributeNS(null,"startOffset","10%");
newTextPath.setAttributeNS(xlinkNS, "xlink:href", "#"+id);
var textNode = document.createTextNode("Middle 50 (25% to 75%)");
newTextPath.appendChild(textNode);
newText.appendChild(newTextPath);
elem.parentNode.insertBefore(newText, elem.nextSibling);
//quartile 3
var elem3 = chart.yAxis[0].plotLinesAndBands[3].svgElem.element;
id = helpers.makeid();
elem3.setAttribute("id", id);
var newText = document.createElementNS(svgNS,"text");
newText.setAttributeNS(null,"font-family","Verdana");
newText.setAttributeNS(null,"font-weight","bold");
newText.setAttributeNS(null,"font-size","10");
newText.setAttributeNS(null,"dy","-5");
newText.setAttributeNS(null,"fill","green");
newText.setAttributeNS(null,"x", 5);
newText.setAttributeNS(null,"y", 5);
var newTextPath = document.createElementNS(svgNS, "textPath");
newTextPath.setAttributeNS(null,"startOffset","10%");
newTextPath.setAttributeNS(xlinkNS, "xlink:href", "#"+id);
var textNode = document.createTextNode("Quartile 3 (75% to 100%)");
newTextPath.appendChild(textNode);
newText.appendChild(newTextPath);
elem.parentNode.insertBefore(newText, elem.nextSibling);
});