highcharts，計圖表，上滑蓋更新

Question

我要更新滑塊移動規圖，應該是連續的，但是當我嘗試更新它的滑塊移動的動作非常緩慢，呆滯

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); 
     }  
    });  


}); 

JS FIDDLE DEMO

Answer 1

你可以嘗試只更新圖表，如果超過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 
    }, 

刪除動畫似乎爲我帶來更多的不同。

http://jsfiddle.net/MGVhF/