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/

highcharts，gauge chart，滑块更新

1 个答案: