使用jQuery UI Slider的Highcharts.js饼图 - 未正确更新

Question

我希望能够使用jQuery UI滑块更新Highcharts饼图。我希望它从0％（所有部分完全隐藏，因为它们在页面加载时）到100％。

基本上控制用滑块自动播放的开场动画......

这是我的尝试： http://jsfiddle.net/ZNB78/1/

我的代码：

function updateGaugeChart(chart, value) {
    var point = chart.series[0].points[0];
    var newVal = value;
      point.update(newVal);
  }

  $(function () {
      var chartObj = {
          chart: {
        renderTo: 'container',
        type: 'pie'
    },
    plotOptions: {
        pie: {
            innerSize: '55%'
        }
    },
    pane: {
        startAngle: 0,
        endAngle: 20

    },
    series: [{
        data: [
            [20],
            [30],
            [40]
        ]
    }]
};    

var gaugeChartObj = new Highcharts.Chart(chartObj);

var lastVal = 0;
$("#slider").slider({
    value: 1,
    range: "min",
    min: 0,
    max: 20,
    step: 1,
    animate: true,
    slide: function (event, ui) {
        $("#slider-val").text(ui.value);
        if (Math.abs(ui.value - lastVal) > 0) {
            updateGaugeChart(gaugeChartObj, ui.value);
            lastVal = ui.value;
        }
          }
      });
  });