使用Highcharts在Gauge图表上显示更多数据
use*_*573 3 javascript highcharts
我手动绘制Canvas图表,如下所示:
但是,在IE8上,canvas不兼容.
现在,我想使用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]为绿色.
请教我更多.
您正在尝试使用两种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);
}
});
});
更新:
- 如果设置yAxis停止,颜色可以流畅地改变.API:http://api.highcharts.com/highcharts#yAxis.stops
停止比例,如果为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);
- 针(又称拨号盘)和枢轴可以使用API中描述的选项进行样式设置.
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轴刻度线.使用默认选项无法更改所选行或其破折号样式的可见性.一种方法是在负载和每次重绘后改变它们的样式.
Run Code Online (Sandbox Code Playgroud)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包装器,它将改变默认行为并启用每个选定刻度的设置样式.
- 此时您可能会注意到刻度线被系列图覆盖.如果要避免它,请将yAxis的zIndex设置为例如7
Finall示例: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);
}
});
});