VUゲージのサンプルを使用した興味深い小さな「癖」。ゲージペインの位置を変更しようとすると、数値表示が消えてしまいます。位置を100％未満に保つと、ディスプレイに100％を超えるものが表示され、数値表示が消えます。
何度もディスプレイを見える位置に戻そうとしましたが、うまくいきませんでした。何か案は？最新のテストフィドルは次のとおりです。
要素の調整は簡単です。ペイン：セクションを使用してゲージ全体を表示ペインで移動し、datalabel：セクションを使用して数値表示を移動します。
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
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: 'Efficiencies'
},
/***
in order to move the gauge up or down in the pane, adjust the 'Y' element in
the center array. Adjusting this above 100% (to move the gauge DOWN)
will cause the numeric display to disappear
***/
pane: [{
startAngle: -45,
endAngle: 45,
background: null,
center: ['25%', '100%'],
size: 200
}, {
startAngle: -45,
endAngle: 45,
background: null,
center: ['75%', '105%'],
size: 200
}],
yAxis: [{
min: 0,
max: 110,
minorTickPosition: 'outside',
tickPosition: 'outside',
labels: {
rotation: 'auto',
distance: 20
},
plotBands: [{
from: 0,
to: 70,
color: '#DF5353', // red
innerRadius: '100%',
outerRadius: '105%'
}, {
from: 70,
to: 95,
color: '#DDDF0D', // yellow
innerRadius: '100%',
outerRadius: '105%'
}, {
from: 95,
to: 110,
color: '#55BF3B', // green
innerRadius: '100%',
outerRadius: '105%'
}],
pane: 0,
title: {
text: '<span style="font-size:10px">OEE %</span><br/><span style="font-size:8px">Machine 001</span>',
y: -30
}
}, {
min: 0,
max: 110,
minorTickPosition: 'outside',
tickPosition: 'outside',
labels: {
rotation: 'auto',
distance: 20
},
plotBands: [{
from: 0,
to: 70,
color: '#DF5353', // red
innerRadius: '100%',
outerRadius: '105%'
}, {
from: 70,
to: 95,
color: '#DDDF0D', // yellow
innerRadius: '100%',
outerRadius: '105%'
}, {
from: 95,
to: 110,
color: '#55BF3B', // green
innerRadius: '100%',
outerRadius: '105%'
}],
pane: 1,
title: {
text: '<span style="font-size:10px">Cycle Eff %</span><br/><span style="font-size:8px">Machine 001</span>',
y: -30
}
}],
plotOptions: {
gauge: {
/***
Adjusting the position of the numeric display is also easy
Change the y: component more negative move the display UP,
decreasing the value move the display DOWN
***/
dataLabels: {
enabled: true,
x: 0,
y: -120
},
dial: {
radius: '110%'
}
}
},
series: [{
data: [80],
yAxis: 0
}, {
data: [80],
yAxis: 1
}]
},
// Let the music play
function(chart) {
setInterval(function() {
var left = chart.series[0].points[0],
right = chart.series[1].points[0],
leftVal,
//inc = (Math.random() - 0.5) * 30;
inc1 = Math.random() * (30) + 70;
inc2 = Math.random() * (30) + 70;
leftVal = left.y + inc1;
rightVal = right.y + inc2; // / 3;
if (leftVal < 0 || leftVal > 110) {
//leftVal = left.y - inc;
leftVal = 110 - inc1;
}
if (rightVal < 0 || rightVal > 110) {
rightVal = 110 - inc2;
}
left.update(parseInt(leftVal),false);
right.update(parseInt(rightVal), false);//, false);
chart.redraw();
}, 1500);
});
});