我用 Canvas 手动绘制图表是这样的：
但是，画布在 IE8 上不兼容。
现在，我想使用 HighCharts。我在
找到了类似的图表jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/gauge-solid/
如何显示附加值（示例中：76.38 和 93）并同时画针？
更新：
基本上，Kacper 的答案解决了原来的问题。我只是想用更好的视图改进图表。针和线的附加点是这样的。
而且，当当前值达到新点时，我可以定义颜色吗？例如：[0, 76.38] 为红色，[76.38, 93] 为绿色，[93, 95] 为绿色。
请教我更多。
【问题讨论】：
标签： javascript highcharts
您正在尝试使用两种 Highcharts 类型图表的功能 - solidgauge 和 gauge。
可以将它们放在一个图表中，并为两个系列设置相同（或几乎相同）的值。
例如：http://jsfiddle.net/2L1bmhb5/
$(function () {
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: null
},
tooltip: {
enabled: false
},
pane: {
startAngle: -90,
endAngle: 90,
background: {
backgroundColor: '#ccc',
borderWidth: 0,
shape: 'arc',
innerRadius: '60%',
outerRadius: '95%'
}
},
yAxis: {
stops: [
[1, '#f00'] // red
],
min: 0,
max: 95,
minorTickLength: 0,
lineWidth: 0,
tickPixelInterval: 30,
tickWidth: 2,
tickPosition: 'inside',
tickLength: 5,
tickColor: '#666',
tickPositions: [0, 72, 82.68, 95],
labels: {
distance: 10
}
},
series: [{
type: 'gauge',
data: [14],
pivot: {
radius: 0
},
dataLabels: {
y: -5,
borderWidth: 0,
style: {
fontSize: '20px'
}
},
dial: {
radius: '85%',
backgroundColor: 'red',
borderWidth: 0,
baseWidth: 3,
topWidth: 3,
baseLength: '100%', // of radius
rearLength: '0%'
}
}, {
type: 'solidgauge',
fillColor: 'red',
data: [14.5],
radius: '95%'
}]
},
// Add some life
function (chart) {
if (!chart.renderer.forExport) {
setInterval(function () {
var point = chart.series[0].points[0],
point2 = chart.series[1].points[0],
newVal,
inc = Math.round((Math.random() - 0.5) * 20);
newVal = point.y + inc;
if (newVal < 0 || newVal > 95) {
newVal = point.y - inc;
}
point.update(newVal, false);
point2.update(newVal + 0.5);
}, 3000);
}
});
});
更新：
如果为 0-1，则停止的比例，所以如果您希望颜色基于轴值 - 缩放它们。
stops: [
[0, '#ff0000'], // red
[76.38/95, '#00ff00'], // green
[93/95, '#0000ff'] // blue
],
其他方法是使用 yAxis minColor 和 maxColor 来更改颜色。在这种情况下，轴必须更新并且系列必须另外与轴绑定。
http://jsfiddle.net/2L1bmhb5/2/
...
if (newVal < 76.38) {
color = col[0];
} else if (newVal < 93) {
color = col[1];
} else {
color = col[2];
}
chart.yAxis[0].update({
stops: [
[1, color]
]
},false);
point.update(newVal, false);
point2.update(newVal, false);
chart.series[1].bindAxes(); //solidgauge series
chart.redraw(true);
http://api.highcharts.com/highcharts#series.pivot
http://api.highcharts.com/highcharts#series.dial
pivot: {
backgroundColor: "#fff",
borderColor: "#666",
borderWidth: 5,
radius: 6
},
dial: {
radius: '100%',
backgroundColor: '#666',
borderWidth: 0,
baseWidth: 5,
topWidth: 5,
baseLength: '100%', // of radius
rearLength: '0%'
}
http://jsfiddle.net/2L1bmhb5/3/
附加点的线是 y 轴刻度线。无法使用默认选项来更改所选线条的可见性或其虚线样式。一种方法是在加载时和每次重绘后更改它们的样式。
function styleTickLines() {
var paths = $('.highcharts-axis > path').splice(0),
len = paths.length;
// hide first and last
paths[0].setAttribute('opacity', 0);
paths[len - 1].setAttribute('opacity', 0);
// style the rest
for (var i = 1; i < len - 1; i++) {
paths[i].setAttribute('stroke-dasharray', '3,3');
}
}
http://jsfiddle.net/2L1bmhb5/4/
另一种方法是编写 Highcharts 包装器，它会更改默认行为并启用每个选定刻度的设置样式。
最后一个例子：http://jsfiddle.net/2L1bmhb5/6/
$(function () {
var col = ['#ff0000', '#00ff00', '#0000ff'],
color;
function styleTickLines() {
var paths = $('.highcharts-axis > path').splice(0),
len = paths.length;
// hide first and last
paths[0].setAttribute('opacity', 0);
paths[len - 1].setAttribute('opacity', 0);
// style the rest
for (var i = 1; i < len - 1; i++) {
paths[i].setAttribute('stroke-dasharray', '3,3');
}
}
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false,
events: {
load: styleTickLines,
redraw: styleTickLines
}
},
title: {
text: null
},
tooltip: {
enabled: false
},
pane: {
startAngle: -90,
endAngle: 90,
background: {
backgroundColor: '#ccc',
borderWidth: 0,
shape: 'arc',
innerRadius: '60%',
outerRadius: '100%'
}
},
yAxis: {
zIndex: 7,
stops: [
[1, '#ff0000']
],
min: 0,
max: 95,
minorTickLength: 0,
lineWidth: 0,
tickPixelInterval: 30,
tickWidth: 2,
tickPosition: 'inside',
tickLength: 46,
tickColor: '#666',
tickPositions: [0, 76.38, 93, 95],
labels: {
distance: 20
}
},
series: [{
type: 'solidgauge',
fillColor: 'red',
data: [72],
radius: '100%',
dataLabels: {
y: 10,
borderWidth: 0,
style: {
fontSize: '20px'
}
}
}, {
type: 'gauge',
data: [72],
pivot: {
backgroundColor: "#fff",
borderColor: "#666",
borderWidth: 5,
radius: 6
},
dataLabels: {
enabled: false
},
dial: {
radius: '105%',
backgroundColor: '#666',
borderWidth: 0,
baseWidth: 5,
topWidth: 5,
baseLength: '100%', // of radius
rearLength: '0%'
}
}]
},
// Add some life
function (chart) {
if (!chart.renderer.forExport) {
setInterval(function () {
var point = chart.series[0].points[0],
point2 = chart.series[1].points[0],
newVal,
inc = Math.round((Math.random()) * 10);
newVal = point.y + inc;
if (newVal < 0 || newVal > 95) {
newVal = point.y - inc;
}
if (newVal < 76.38) {
color = col[0];
} else if (newVal < 93) {
color = col[1];
} else {
color = col[2];
}
chart.yAxis[0].update({
stops: [
[1, color]
]
}, false);
point.update(newVal, false);
point2.update(newVal, false);
chart.series[0].bindAxes();
chart.redraw(true);
}, 3000);
}
});
});
【讨论】：
yAxis.tickLength、API、其他选项 - 窗格中心、大小 API 和solidgauge 的内部半径和半径API。示例：jsfiddle.net/2L1bmhb5/1