высококачественные диаграммы как есть загрузка анимация после обновления данных?

Question

Я нашел аналогичный вопрос о SO, но моя проблема выглядит по-другому. Я использую официальную демо highstock ссылке: http://www.highcharts.com/stock/demo/dynamic-update

Здесь я изменил некоторые данные:. вар NewData = (функция() { вар данных = [], время = (новый Date()) GetTime(), я ; для (я = -199; я < = 0; I + = 1) { data.push ([ время + I * 1000, Math.round (Math.random() * 100) ]); } данные возврата; }()); $ (функция() {

Highcharts.setOptions({ 
    global: { 
     useUTC: false 
    } 
}); 
$('#container').highcharts('StockChart', { 
    chart: { 
     events: { 
     } 
    }, 
    rangeSelector: { 
     buttons: [{ 
      count: 1, 
      type: 'minute', 
      text: '1M' 
     }, { 
      count: 5, 
      type: 'minute', 
      text: '5M' 
     }, { 
      type: 'all', 
      text: 'All' 
     }], 
     inputEnabled: false, 
     selected: 0 
    }, 

    title: { 
     text: 'Live random data' 
    }, 

    exporting: { 
     enabled: false 
    }, 

    series: [{ 
     name: 'Random data', 
     data: (function() { 
      // generate an array of random data 
      var data = [], 
       time = (new Date()).getTime(), 
       i; 

      for (i = -999; i <= 0; i += 1) { 
       data.push([ 
        time + i * 1000, 
        Math.round(Math.random() * 100) 
       ]); 
      } 
      return data; 
     }()) 
    }] 
}); 
$('#button').click(function() { 
    var chart = $('#container').highcharts(); 
    chart.series[0].update({name: 'newName'}); 
    chart.series[0].setData(newData); 
}); 

});

После нажатия кнопки появляются новые диаграммы, но без анимации загрузки. Я задаю этот вопрос, потому что я видел, что очень похожий (-ы) был решен, кто-нибудь может мне помочь? большое спасибо и в очень большой спешке ~

Answer 1

В коде вы только устанавливаете новые данные на уже существующую диаграмму.

Если вы хотите создать новый график, когда вы нажимаете кнопку, вам нужно переместить создание диаграммы внутри функции нажатия кнопки.

Вы также можете расширить анимацию при добавлении серии с помощью PlotOptions:

plotOptions: { 
    series: { 
     animation: { 
     duration: 2000 
     } 
    } 
    }, 

Пример:

http://jsfiddle.net/xsmvkgse/2/

Пример без нажатия кнопки:

http://jsfiddle.net/meh2b8rn/