Можно ли отложить анимацию загрузки иглы в угловом манометре Highcharts?
Я создал угловой датчик Highcharts. Мне нужно отложить анимацию загрузки иглы.
Вот код:
$(function () {
$('#meter').highcharts({
chart: {
type: 'gauge',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false
},
credits: {
enabled: false
},
title: {
text: ''
},
//
plotOptions: {
gauge: {
dataLabels: {
enabled: false
},
dial: {
radius: '70%',
backgroundColor: '#000',
topWidth: 1,
baseWidth: 5,
rearLength: '20%'
},
pivot: {
radius: 5,
borderWidth: 5,
borderColor: '#000',
backgroundColor: '#fff'
}
}
},
pane: {
startAngle:-90,
endAngle: 90,
center: ['50%', '55%'],
size: '85%',
startAngle: -90,
endAngle: 90,
background: {
backgroundColor: '#0187CC',
innerRadius: '110%',
outerRadius: '100%',
borderColor: 'transparent',
shape: 'arc',
},
},
// the value axis
yAxis: {
min: 0,
max: 30,
minorTickInterval: 'auto',
minorTickWidth: 0,
minorTickLength: 10,
minorTickPosition: 'inside',
minorTickColor: '#0187CC',
tickPixelInterval: 30,
tickWidth: 10,
tickPosition: 'inside',
tickLength: 10,
tickColor: '#0187CC',
labels: {
step: 2,
rotation: 'auto'
},
title: {
text: ''
},
plotBands: [{
color: '#FFF'
}
]
},
series: [{
name: 'Speed',
data: [20],
tooltip: {
valueSuffix: ' Mbps'
}
}]
},
// Add some life
function (chart) {
if (!chart.renderer.forExport) {
setInterval(function () {
var point = chart.series[0].points[0],
newVal,
inc = Math.round((Math.random() - 0) * 0);
newVal = point.y + inc;
if (newVal < 0 || newVal > 200) {
newVal = point.y - inc;
}
point.update(newVal);
}, 3000);
}
});
});.highcharts-title, .highcharts-button, .highcharts-data-labels, .highcharts-tooltip, .highcharts-axis path:last-child , .highcharts-axis path:first-child, .highcharts-axis path:nth-child(13){
display: none;
}
.highcharts-axis-labels text{
fill: #000 !important;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="meter.js"></script>
<div id="meter" style="min-width: 310px; max-width: 400px; height: 300px; margin: 0 auto"></div>1 ответ
Решение
В атрибуте plotOptions добавьте следующий код:
series: {
animation: {
duration: 2000
}
}
Это приведет к более медленному запуску измерительной иглы. Увеличьте число, чтобы замедлить его; уменьшите число, чтобы ускорить его.
Смотрите также обновленный фрагмент кода ниже.
Я надеюсь, что это полезно!
$(function () {
$('#meter').highcharts({
chart: {
type: 'gauge',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false
},
credits: {
enabled: false
},
title: {
text: ''
},
//
plotOptions: {
gauge: {
dataLabels: {
enabled: false
},
dial: {
radius: '70%',
backgroundColor: '#000',
topWidth: 1,
baseWidth: 5,
rearLength: '20%'
},
pivot: {
radius: 5,
borderWidth: 5,
borderColor: '#000',
backgroundColor: '#fff'
}
},
series: {
animation: {
duration: 2000
}
}
},
pane: {
startAngle:-90,
endAngle: 90,
center: ['50%', '55%'],
size: '85%',
startAngle: -90,
endAngle: 90,
background: {
backgroundColor: '#0187CC',
innerRadius: '110%',
outerRadius: '100%',
borderColor: 'transparent',
shape: 'arc',
},
},
// the value axis
yAxis: {
min: 0,
max: 30,
minorTickInterval: 'auto',
minorTickWidth: 0,
minorTickLength: 10,
minorTickPosition: 'inside',
minorTickColor: '#0187CC',
tickPixelInterval: 30,
tickWidth: 10,
tickPosition: 'inside',
tickLength: 10,
tickColor: '#0187CC',
labels: {
step: 2,
rotation: 'auto'
},
title: {
text: ''
},
plotBands: [{
color: '#FFF'
}
]
},
series: [{
name: 'Speed',
data: [20],
tooltip: {
valueSuffix: ' Mbps'
}
}]
},
// Add some life
function (chart) {
if (!chart.renderer.forExport) {
setInterval(function () {
var point = chart.series[0].points[0],
newVal,
inc = Math.round((Math.random() - 0) * 0);
newVal = point.y + inc;
if (newVal < 0 || newVal > 200) {
newVal = point.y - inc;
}
point.update(newVal);
}, 3000);
}
});
});.highcharts-title, .highcharts-button, .highcharts-data-labels, .highcharts-tooltip, .highcharts-axis path:last-child , .highcharts-axis path:first-child, .highcharts-axis path:nth-child(13){
display: none;
}
.highcharts-axis-labels text{
fill: #000 !important;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="meter.js"></script>
<div id="meter" style="min-width: 310px; max-width: 400px; height: 300px; margin: 0 auto"></div>