Javascript 在高位仪表中,如何设置仪表读数中的数字
我想显示高度计图表,我需要显示读数-20到0(-20,19,18,17,16…0),而不是(-20,-10,0) 参见小提琴: 代码Javascript 在高位仪表中,如何设置仪表读数中的数字,javascript,highcharts,Javascript,Highcharts,我想显示高度计图表,我需要显示读数-20到0(-20,19,18,17,16…0),而不是(-20,-10,0) 参见小提琴: 代码 Highcharts.chart('container'{ 图表:{ 类型:“仪表”, 打印边框宽度:1, 绘图背景颜色:{ 线性半径:{x1:0,y1:0,x2:0,y2:1}, 停止:[ [0,#FFF4C6'], [0.3,#FFFFFF'], [1'#FFF4C6'] ] }, plotBackgroundImage:空, 身高:200 }, 标题:{
Highcharts.chart('container'{
图表:{
类型:“仪表”,
打印边框宽度:1,
绘图背景颜色:{
线性半径:{x1:0,y1:0,x2:0,y2:1},
停止:[
[0,#FFF4C6'],
[0.3,#FFFFFF'],
[1'#FFF4C6']
]
},
plotBackgroundImage:空,
身高:200
},
标题:{
文本:“VU仪表”
},
窗格:[{
startAngle:-50,
端角:50,
背景:空,
中心:['25%,'145%'],
尺码:300
}, {
startAngle:-45,
端角:45,
背景:空,
中心:['75%,'145%'],
尺码:300
}],
工具提示:{
已启用:false
},
亚克斯:[{
最小:-20,
最高:6,
minorTickPosition:“外部”,
位置:'外部',
标签:{
旋转:“自动”,
距离:20
},
绘图带:[{
起:0,,
致:6,,
颜色:“#C02316”,
内半径:“100%”,
外层:105%
}],
窗格:0,
标题:{
文本:“VU
频道A”,
y:-40
}
}, {
最小:-20,
最高:6,
minorTickPosition:“外部”,
位置:'外部',
标签:{
旋转:“自动”,
距离:20
},
绘图带:[{
起:0,,
致:6,,
颜色:“#C02316”,
内半径:“100%”,
外层:105%
}],
窗格:1,
标题:{
文本:“VU
频道B”,
y:-40
}
}],
打印选项:{
仪表:{
数据标签:{
已启用:false
},
拨号:{
半径:“100%”
}
}
},
系列:[{
名称:“A频道”,
数据:[-20],
雅克斯:0
}, {
名称:“B频道”,
数据:[-20],
亚克斯:1
}]
}
);
更改chart.yAxis.min和chart.yAxis.max:
Highcharts.chart('container', {
chart: {
type: 'gauge',
plotBorderWidth: 1,
plotBackgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, '#FFF4C6'],
[0.3, '#FFFFFF'],
[1, '#FFF4C6']
]
},
plotBackgroundImage: null,
height: 200
},
title: {
text: 'VU meter'
},
pane: [{
startAngle: -45,
endAngle: 45,
background: null,
center: ['25%', '145%'],
size: 300
}, {
startAngle: -45,
endAngle: 45,
background: null,
center: ['75%', '145%'],
size: 300
}],
tooltip: {
enabled: false
},
yAxis: [{
min: 0,
max: 20,
minorTickPosition: 'outside',
tickPosition: 'outside',
labels: {
rotation: 'auto',
distance: 20
},
plotBands: [{
from: 15,
to: 20,
color: '#C02316',
innerRadius: '100%',
outerRadius: '105%'
}],
pane: 0,
title: {
text: 'VU<br/><span style="font-size:8px">Channel A</span>',
y: -40
}
}, {
min: -20,
max: 10,
minorTickPosition: 'outside',
tickPosition: 'outside',
labels: {
rotation: 'auto',
distance: 20
},
plotBands: [{
from: 0,
to: 10,
color: '#C02316',
innerRadius: '100%',
outerRadius: '105%'
}],
pane: 1,
title: {
text: 'VU<br/><span style="font-size:8px">Channel B</span>',
y: -40
}
}],
plotOptions: {
gauge: {
dataLabels: {
enabled: false
},
dial: {
radius: '100%'
}
}
},
series: [{
name: 'Channel A',
data: [10],
yAxis: 0
}, {
name: 'Channel B',
data: [-10],
yAxis: 1
}]
},
// Let the music play
function (chart) {
setInterval(function () {
if (chart.series) { // the chart may be destroyed
var left = chart.series[0].points[0],
right = chart.series[1].points[0],
leftVal,
rightVal,
inc = Math.random() - 0.5;
leftVal = left.y + inc;
rightVal = leftVal + inc;
left.update(leftVal, false);
right.update(rightVal, false);
chart.redraw();
}
}, 500);
});
Highcharts.chart('container'{
图表:{
类型:“仪表”,
打印边框宽度:1,
绘图背景颜色:{
线性半径:{x1:0,y1:0,x2:0,y2:1},
停止:[
[0,#FFF4C6'],
[0.3,#FFFFFF'],
[1'#FFF4C6']
]
},
plotBackgroundImage:空,
身高:200
},
标题:{
文本:“VU仪表”
},
窗格:[{
startAngle:-45,
端角:45,
背景:空,
中心:['25%,'145%'],
尺码:300
}, {
startAngle:-45,
端角:45,
背景:空,
中心:['75%,'145%'],
尺码:300
}],
工具提示:{
已启用:false
},
亚克斯:[{
分:0,,
最高:20,
minorTickPosition:“外部”,
位置:'外部',
标签:{
旋转:“自动”,
距离:20
},
绘图带:[{
起:15,
致:20,,
颜色:“#C02316”,
内半径:“100%”,
外层:105%
}],
窗格:0,
标题:{
文本:“VU
频道A”,
y:-40
}
}, {
最小:-20,
最高:10,
minorTickPosition:“外部”,
位置:'外部',
标签:{
旋转:“自动”,
距离:20
},
绘图带:[{
起:0,,
致:10,,
颜色:“#C02316”,
内半径:“100%”,
外层:105%
}],
窗格:1,
标题:{
文本:“VU
频道B”,
y:-40
}
}],
打印选项:{
仪表:{
数据标签:{
已启用:false
},
拨号:{
半径:“100%”
}
}
},
系列:[{
名称:“A频道”,
数据:[10],
雅克斯:0
}, {
名称:“B频道”,
数据:[-10],
亚克斯:1
}]
},
//让音乐播放
功能(图表){
setInterval(函数(){
如果(chart.series){//该图表可能会被销毁
var left=图表。系列[0]。点[0],
右=图表。系列[1]。点[0],
leftVal,
rightVal,
inc=数学随机数()-0.5;
leftVal=left.y+inc;
rightVal=leftVal+inc;
left.update(leftVal,false);
右。更新(rightVal,false);
chart.redraw();
}
}, 500);
});
这就是你要找的吗
我只是简单地更改了y轴中的max
和min
字段,并更改了javascript函数以适应新的间隔
编辑:我以前不理解这个问题,但根据你的评论,这应该行得通
EDIT2:直到现在我才看到你编辑了这个问题。更新了编辑中的链接,使其包含从-20到0的值(在0到20之前)。很抱歉,这不是我的要求,我希望仪表读数应为1到20,无任何ga
Highcharts.chart('container', {
chart: {
type: 'gauge',
plotBorderWidth: 1,
plotBackgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, '#FFF4C6'],
[0.3, '#FFFFFF'],
[1, '#FFF4C6']
]
},
plotBackgroundImage: null,
height: 200
},
title: {
text: 'VU meter'
},
pane: [{
startAngle: -45,
endAngle: 45,
background: null,
center: ['25%', '145%'],
size: 300
}, {
startAngle: -45,
endAngle: 45,
background: null,
center: ['75%', '145%'],
size: 300
}],
tooltip: {
enabled: false
},
yAxis: [{
min: 0,
max: 20,
minorTickPosition: 'outside',
tickPosition: 'outside',
labels: {
rotation: 'auto',
distance: 20
},
plotBands: [{
from: 15,
to: 20,
color: '#C02316',
innerRadius: '100%',
outerRadius: '105%'
}],
pane: 0,
title: {
text: 'VU<br/><span style="font-size:8px">Channel A</span>',
y: -40
}
}, {
min: -20,
max: 10,
minorTickPosition: 'outside',
tickPosition: 'outside',
labels: {
rotation: 'auto',
distance: 20
},
plotBands: [{
from: 0,
to: 10,
color: '#C02316',
innerRadius: '100%',
outerRadius: '105%'
}],
pane: 1,
title: {
text: 'VU<br/><span style="font-size:8px">Channel B</span>',
y: -40
}
}],
plotOptions: {
gauge: {
dataLabels: {
enabled: false
},
dial: {
radius: '100%'
}
}
},
series: [{
name: 'Channel A',
data: [10],
yAxis: 0
}, {
name: 'Channel B',
data: [-10],
yAxis: 1
}]
},
// Let the music play
function (chart) {
setInterval(function () {
if (chart.series) { // the chart may be destroyed
var left = chart.series[0].points[0],
right = chart.series[1].points[0],
leftVal,
rightVal,
inc = Math.random() - 0.5;
leftVal = left.y + inc;
rightVal = leftVal + inc;
left.update(leftVal, false);
right.update(rightVal, false);
chart.redraw();
}
}, 500);
});