[英]highcharts, gauge chart, update on slider
我想在滑塊移動時更新量表,它應該是連續的,但是當我嘗試在滑塊移動時更新量表時,移動非常緩慢且緩慢
HTML
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<div id="container" style="min-width: 310px; max-width: 400px; height: 300px; margin: 0 auto"></div>
<div id="slider"></div>
<div id="slider-val" style="border:1px solid #000; display:inline">75</div>
JAVASCRIPT
function updateGaugeChart(chart, value){
var point = chart.series[0].points[0];
var newVal = value;
point.update(newVal);
}
$(function () {
var chartObj = {
chart: {
type: 'gauge',
renderTo:"container"
},
pane: {
startAngle: -150,
endAngle: 150
},
// the value axis
yAxis: {
min: 0,
max: 200,
minorTickInterval: 'auto',
minorTickWidth: 1,
minorTickLength: 10,
minorTickPosition: 'inside',
minorTickColor: '#666',
tickPixelInterval: 30,
tickWidth: 2,
tickPosition: 'inside',
tickLength: 10,
tickColor: '#666',
labels: {
step: 2,
rotation: 'auto'
},
title: {
text: 'km/h'
}
},
series: [{
name: 'Speed',
data: [80],
tooltip: {
valueSuffix: ' km/h'
}
}]};
var gaugeChartObj = new Highcharts.Chart(chartObj);
$("#slider").slider({
value: 75,
range: "min",
min:0,
max:200,
animate: true,
slide: function( event, ui ) {
$("#slider-val").text(ui.value);
updateGaugeChart(gaugeChartObj, ui.value);
}
});
});
如果滑塊移動了2或3個點以上,則可以嘗試僅更新圖表,例如:
var lastVal = 0;
$("#slider").slider({
value: 75,
range: "min",
min: 0,
max: 200,
animate: true,
slide: function (event, ui) {
$("#slider-val").text(ui.value);
if (Math.abs(ui.value - lastVal) > 3) {
updateGaugeChart(gaugeChartObj, ui.value);
lastVal = ui.value;
}
}
});
另一個選項是禁用動畫:
chart: {
type: 'gauge',
renderTo: "container",
animation:false
},
刪除動畫對我來說似乎更重要。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.