我想在量规带上有工具提示或图例。我画这样的乐队：
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'
}
通常 plotBands 没有任何工具提示或图例选项，但是可以向 plotBand 添加一些自定义事件，例如鼠标悬停。见：http ://api.highcharts.com/highcharts#xAxis.plotBands.events
因此，您可以为此创建自己的工具提示。
实际上，通过将文本附加到由 Highcharts 生成的 svg 路径元素，可以为量规图带制作非常优雅的标签。通过这样做，您可以获得实际上遵循图带曲线的文本。具体查看在仪表初始化后触发的匿名函数中的代码。您需要获取正确的 plotband 对象，将 id 属性分配给 path 元素，然后插入 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);
});