我想在量规频段上提供工具提示或图例。我画这样的乐队：
plotBands: [{
from: 0,
to: 10,
color: '#55BF3B'
}, {
from: 10,
to: 20,
color: '#DDDF0D'
}]
我想在乐队的鼠标悬停上看到工具提示。
或者我想要的另一个解决方案是为每个乐队展示相关颜色的传说。有点的传说可选，但不适用于乐队。
对于plotBands，有showInLegend:true这样的选项吗？或任何其他解决方案来获得这些？
答案 0 :(得分：2)
一般情况下，plotBands没有任何工具提示或图例选项，但是可以向plotBand添加一些自定义事件，例如mouseover。请参阅：http://api.highcharts.com/highcharts#xAxis.plotBands.events
因此，您可以为此创建自己的工具提示。
答案 1 :(得分：1)
由于（例如）不可能，您可以在图表下方放置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'
}
答案 2 :(得分：0)
实际上，通过将文本附加到由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);
});