我目前可以看到的Highcharts的一个缺点是它的仪表库中似乎没有类似温度计的任何东西。我可以看到你可能能够摆弄一些东西但是使用例如1柱条形图或类似的东西,但这并没有真正开始看起来像温度计,即在底部有一个彩色填充灯泡,甚至是圆形底座。
我是否忽略了这样做的方式,还是仅仅从Highcharts曲目中遗漏了? Highcharts的任何人都在关注评论吗?
答案 0 :(得分:7)
但它确实听起来好像我会不幸 关于这一个的高级图表,对这样一个简单的修改是一种耻辱 现状。
不要轻易放弃。 Highcharts是一种工具;如果它不能完全按照你想要的那样做,那就自己动手吧。这是一个优秀的软件开发人员。
例如,这个fiddle将温度计的SVG图像与36行代码中的柱形图组合在一起。它需要一些润色,但希望它可以帮助你。
$(function () {
$('#container').highcharts({
chart: {
type: 'column',
marginBottom: 53
},
credits: {
enabled: false
},
title: null,
legend: {
enabled: false
},
exporting: {
enabled: false
},
yAxis: {
min: 0,
max: 100,
title: null,
align: 'right'
},
xAxis: {
labels: false
},
series: [{
data: [60],
color: 'red'
}]
}, function(chart) { // on complete
chart.renderer.image('http://www.clker.com/cliparts/p/W/e/k/U/d/blank-fundraising-thermometer.svg', 0, 0, 256, 400)
.add();
});
});
答案 1 :(得分:0)
我修复了它,see this fiddle.
$(function () {
$('#container').highcharts({
chart: {
type: 'column',
marginBottom: 72
},
credits: {
enabled: false
},
title: null,
legend: {
enabled: false
},
exporting: {
enabled: false
},
yAxis: {
min: 0,
max: 100,
title: null,
align: 'right'
},
xAxis: {
labels: false
},
series: [{
data: [54],
color: '#c00'
}]
}, function(chart) { // on complete
chart.renderer.image('http://www.clker.com/cliparts/p/W/e/k/U/d/blank-fundraising-thermometer.svg',24, 0, 110, 510).add();
});
});