我想在 Highchart 中的 Angular Gauge 仪表中实现类别并删除数字，如 here 所示。到目前为止我所做的是this .
$(function () {
$('#container').highcharts({
chart: {
type: 'gauge',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: null
},
pane: {
startAngle: -150,
endAngle: 150,
background: [{
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, '#FFF'],
[1, '#333']
]
},
borderWidth: 0,
outerRadius: '109%'
}, {
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, '#333'],
[1, '#FFF']
]
},
borderWidth: 1,
outerRadius: '107%'
}, {
// default background
}, {
backgroundColor: '#DDD',
borderWidth: 0,
outerRadius: '105%',
innerRadius: '103%'
}]
},
// the value axis
yAxis: {
min: 0,
max: 100,
type:'category',
categories:['One','Two','Three','Four','Five'],
tickPixelInterval: 30,
tickWidth: 2,
tickPosition: 'outside',
tickLength: 20,
tickColor: '#666',
title: {
text: null
},
plotBands: [{
from: 0,
to: 60,
color: '#55BF3B' // green
}, {
from: 60,
to: 80,
color: '#DDDF0D' // yellow
}, {
from: 80,
to: 100,
color: '#DF5353' // red
}]
},
series: [{
name: 'Speed',
data: [80]
}]
});
});
我不想要图表中的任何数字，正如您在所附屏幕截图中看到的那样。 任何帮助表示赞赏。 谢谢。
最佳答案
您的 hive 值 (80)，但只有 5 个类别。标准化值以获得所需的结果:http://jsfiddle.net/buaqgvq2/1
$('#container').highcharts({
chart: {
type: 'gauge'
},
pane: {
startAngle: -150,
endAngle: 150
},
// the value axis
yAxis: {
min: 0,
max: 4,
type:'category',
categories:['One','Two','Three','Four','Five'],
tickPixelInterval: 30,
tickWidth: 2,
tickPosition: 'outside',
tickLength: 20,
tickColor: '#666',
title: {
text: null
},
plotBands: [{
from: 0,
to: 2,
color: '#55BF3B' // green
}, {
from: 2,
to: 3,
color: '#DDDF0D' // yellow
}, {
from: 3,
to: 4,
color: '#DF5353' // red
}]
},
series: [{
name: 'Speed',
data: [3.4]
}]
});
关于javascript - 在 Angular Gauge Highchart 中显示类别并删除数字，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36083353/