我对规格图表有要求 -
$(function () {
var gaugeOptions = {
chart: {
type: 'solidgauge'
},
title: {
text: 'Sample Title'
},
pane: {
center: ['50%', '85%'],
size: '140%',
startAngle: -90,
endAngle: 90,
background: {
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
innerRadius: '60%',
outerRadius: '100%',
shape: 'arc'
}
},
tooltip: {
enabled: false
},
// the value axis
yAxis: {
stops: [
[0.1, '#55BF3B'], // green
[0.5, '#DDDF0D'], // yellow
[0.9, '#DF5353'] // red
],
lineWidth: 0,
minorTickInterval: null,
tickAmount: 2,
title: {
y: -70,
},
labels: {
y: 16
}
},
plotOptions: {
solidgauge: {
dataLabels: {
y: 5,
borderWidth: 0,
useHTML: true
}
}
}
};
// The speed gauge
$('#container-speed').highcharts(Highcharts.merge(gaugeOptions, {
yAxis: {
min: 0,
max: 200,
title: {
text: 'Speed'
}
},
credits: {
enabled: false
},
series: [{
name: 'Speed',
data: [80],
dataLabels: {
format: '<div style="text-align:center"><span style="font-size:25px;color:' +
((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span><br/>' +
'<span style="font-size:12px;color:silver">km/h</span></div>'
},
tooltip: {
valueSuffix: ' km/h'
}
}]
}));
// The RPM gauge
$('#container-rpm').highcharts(Highcharts.merge(gaugeOptions, {
yAxis: {
min: 0,
max: 5,
title: {
text: 'RPM'
}
},
series: [{
name: 'RPM',
data: [1],
dataLabels: {
format: '<div style="text-align:center"><span style="font-size:25px;color:' +
((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y:.1f}</span><br/>' +
'<span style="font-size:12px;color:silver">* 1000 / min</span></div>'
},
tooltip: {
valueSuffix: ' revolutions/min'
}
}]
}));
// Bring life to the dials
setTimeout(function () {
// Speed
var chart = $('#container-speed').highcharts(),
point,
newVal,
inc;
if (chart) {
point = chart.series[0].points[0];
inc = Math.round((Math.random() - 0.5) * 100);
newVal = point.y + inc;
if (newVal < 0 || newVal > 200) {
newVal = point.y - inc;
}
point.update(newVal);
}
// RPM
chart = $('#container-rpm').highcharts();
if (chart) {
point = chart.series[0].points[0];
inc = Math.random() - 0.5;
newVal = point.y + inc;
if (newVal < 0 || newVal > 5) {
newVal = point.y - inc;
}
point.update(newVal);
}
}, 2000);});
在上面的示例中，您可以看到标题正在打印两次，但我需要在中心显示单个标题。
所以我得到了解决方案，而不是创建多个图表创建具有多个窗格和系列对象的单个图表，如下面的链接所示。
$(function () {
$('#container').highcharts({
chart: {
type: 'solidgauge',
height: 200
},
title: {
text: 'Sample Title1'
},
pane: [{
startAngle: -90,
endAngle: 90,
background: null,
center: ['25%', '85%'],
size: '140%',
background: {
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
innerRadius: '60%',
outerRadius: '100%',
shape: 'arc'
}
}, {
startAngle: -90,
endAngle: 90,
background: null,
center: ['70%', '85%'],
size: '140%',
background: {
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
innerRadius: '60%',
outerRadius: '100%',
shape: 'arc'
}
}],
tooltip: {
enabled: false
},
yAxis: [{
stops: [
[0.1, '#55BF3B'], // green
[0.5, '#DDDF0D'], // yellow
[0.9, '#DF5353'] // red
],
lineWidth: 0,
min: 0,
max: 200,
minorTickInterval: null,
tickAmount: 2,
title: {
y: -70,
text: 'Speed'
},
pane:0,
labels: {
y: 16
}
}, {
stops: [
[0.1, '#55BF3B'], // green
[0.5, '#DDDF0D'], // yellow
[0.9, '#DF5353'] // red
],
lineWidth: 0,
min: 0,
max: 5,
minorTickInterval: null,
tickAmount: 2,
pane:1,
title: {
y: 70,
text: 'RPM'
},
labels: {
y: 16
}
}],
plotOptions: {
solidgauge: {
dataLabels: {
y: 5,
borderWidth: 0,
useHTML: true
}
}
},
series: [{
name: 'Speed',
data: [80],
yAxis: 0,
dataLabels: {
format: '<div style="text-align:center"><span style="font-size:25px;color:' +
((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span><br/>' +
'<span style="font-size:12px;color:silver">km/h</span></div>'
},
tooltip: {
valueSuffix: ' km/h'
}
}, {
name: 'RPM',
data: [1],
yAxis: 1,
dataLabels: {
format: '<div style="text-align:center"><span style="font-size:25px;color:' +
((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y:.1f}</span><br/>' +
'<span style="font-size:12px;color:silver">* 1000 / min</span></div>'
},
tooltip: {
valueSuffix: ' revolutions/min'
}
}]
});
// Bring life to the dials
setInterval(function () {
var chart = $('#container').highcharts();
if (chart.series) { // the chart may be destroyed
var left = chart.series[0].points[0],
right = chart.series[1].points[0],
leftVal,
rightVal,
inc1 = Math.round((Math.random() - 0.5) * 100),
inc2 = (Math.random() - 0.5) * 3;
leftVal = left.y + inc1;
if (leftVal < 0 || leftVal > 200) {
leftVal = left.y - inc1;
}
rightVal = right.y+inc2;
if (rightVal < 0 || rightVal > 5) {
rightVal = right.y - inc2;;
}
left.update(leftVal);
right.update(rightVal);
chart.redraw();
}
}, 2000);});
现在Proiblem
在我的图表中，我可以使用规格或实心规格或两者兼而有之。
我想实际动态添加窗格和系列对象。如何添加系列我有chart.addSeries（）窗格的方法。
同样在我的图表中，我们启用了一个工具栏，其中我们有一些用户可以过滤选项的表单，如
当我使用多个窗格和多个系列
时，如何将这些选项更新到特定窗格或系列请帮帮我。