Javascript 用Highcharts在仪表图上显示更多数据
我用画布手动绘制图表,如下所示: 但是,canvas在IE8上不兼容 现在,我想用海图。我在网站上找到了类似的图表Javascript 用Highcharts在仪表图上显示更多数据,javascript,highcharts,Javascript,Highcharts,我用画布手动绘制图表,如下所示: 但是,canvas在IE8上不兼容 现在,我想用海图。我在网站上找到了类似的图表 jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/gauge-solid/ 如何显示附加值(在示例中:76.38和93)并同时绘制指针 更新: 基本上,Kacper的答案解决了最初的问题。我只是想用更好的视角来改进图表。针和
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类型图表的功能-和 可以将它们放在一个图表中,并为两个系列设置相同(或几乎相同)的值 例如: 另一种方法是使用yAxis minColor和maxColor来更改颜色。在这种情况下,轴必须更新,系列必须附加轴绑定
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');
}
}
函数样式ticklines(){
变量路径=$('.highcharts轴>路径')。拼接(0),
len=路径长度;
//始终隐藏
路径[0]。setAttribute('opacity',0);
路径[len-1].setAttribute('opacity',0);
//其余的样式
对于(变量i=1;i
$(函数(){
变量列=['#ff0000'、'#00ff00'、'#0000ff'],
颜色
函数styleTickLines(){
变量路径=$('.highcharts轴>路径')。拼接(0),
len=路径长度;
//始终隐藏
路径[0]。setAttribute('opacity',0);
路径[len-1].setAttribute('opacity',0);
//其余的样式
对于(变量i=1;i95){
newVal=point.y-inc;
}
如果(新值<76.38){
颜色=列[0];
}否则如果(新值<93){
颜色=列[1];
}否则{
颜色=col[2];
}
chart.yAxis[0]。更新({
停止:[
[1,颜色]
]
},假);
更新点(newVal,false);
点2.更新(newVal,false);
chart.series[0].bindAxes();
图表。重新绘制(正确);
}, 3000);
}
});
});
我正在寻找的是,可以通过添加缺少的元素。我应该阅读API,因为我想用图像或更好的形状替换指针,并用弧内的线替换“76.38”“93”的线。谢谢Kacper。针的名字叫刻度盘-。要将其更改为img,您必须这样做,因为使用API是不可能的。勾号长度-yAxis.ti
stops: [
[0, '#ff0000'], // red
[76.38/95, '#00ff00'], // green
[93/95, '#0000ff'] // blue
],
...
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);
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%'
}
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');
}
}
$(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);
}
});
});