我想在測量帶上有工具提示或傳說。我畫了這樣的樂隊：如何在plotBand上顯示工具提示或圖例？
plotBands: [{
from: 0,
to: 10,
color: '#55BF3B'
}, {
from: 10,
to: 20,
color: '#DDDF0D'
}]
我想看看mouseover上的工具提示樂隊。
或者我想要的另一個解決方案是用關於顏色來顯示每個樂隊的傳說。有傳言的選項，但不適用於樂隊。
對於plotBands有沒有類似showInLegend:true的選項？或者任何其他解決方案來獲得這些？
一般情況下，plotBands沒有任何工具提示或圖例選項，但是可以向plotBand添加一些自定義事件，例如mouseover。請參閱：http://api.highcharts.com/highcharts#xAxis.plotBands.events
因此，您可以爲此創建自己的工具提示。
感謝什麼答案。你會建議如何在傳奇中添加帶有顏色和標籤的樂隊？ – gencay 2013-02-18 14:48:24
可能唯一的兩個選擇是使用固定的最小/最大或假系列圖例（無點）的區域系列，並管理legendItemClick通過刪除它來隱藏plotBand。 – 2013-02-19 12:25:37
由於它是（例如）不可能，所以你可以在圖表下面放置一個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對象，爲path元素分配一個id屬性，然後插入text和textPath元素（使用createElementNS）。然後使用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);
});
嘗試此鏈接：http://stackoverflow.com/questions/10225896/highchart-tolltip-for-legends – Pandian 2013-02-18 11:45:28
@Pandian這不是我想看到 – gencay 2013-02-18 12:34:35