Highcharts - 柱狀圖重繪動畫

我試圖用新數據數組更新現有數據系列，並在完成時調用redraw函數。雖然這很好，但我不太滿意，因爲我想要進行某種增長/縮小轉型。我看到一個example by Highcharts（擺弄現有的數據集，然後點擊按鈕「設置新數據到選定的系列」），但我不能複製這種行爲。Highcharts - 柱狀圖重繪動畫

這是我寫什麼代碼：

var series, newSeriesThreshold = this.chart.series.length * 2; 

    for (var i = 0; i < data.length; i += 2) { 
    series = { 
     name: this.data[i].title, 
     data: this.data[i].data, 
     color: this.data[i].color 
    }; 

    if (i >= newSeriesThreshold) { 
     this.chart.addSeries(series, false); 
    } else { 
     var currentSeries = this.chart.series[i/2]; 
     currentSeries.setData(series.data, false); 
    } 
    } 

    this.chart.redraw();

這些創建圖表時的選項：

var config = { 
    chart: { 
     renderTo: $(this.container).attr('id'), 
     type: this.settings.type, 
     animation: { 
     duration: 500, 
     easing: 'swing' 
     } 
    }, 
    title: { 
     text: null 
    }, 
    legend: { 
     enabled: this.settings.legend.show 
    }, 
    tooltip: { 
     formatter: function() { 
     return this.x.toFixed(0) + ": <b>" + this.y.toString().toCurrency(0) + '</b>'; 
     } 
    }, 
    xAxis: { 
     title: { 
     text: this.settings.xaxis.title, 
     style: { 
      color: '#666' 
     } 
     } 
    }, 
    yAxis: { 
     title: { 
     text: this.settings.yaxis.title, 
     style: { 
      color: '#666' 
     } 
     } 
    }, 
    series: series, 
    plotOptions: { 
     column: { 
     color: '#FF7400' 
     } 
    }, 
    credits: { 
     enabled: false 
    } 
    };

這就產生了一個即時更新沒有過渡效果。任何想法我可能做錯了什麼？

來源

2012-06-25 Leonard

有什麼錯誤？你能記錄你的數據響應，看看它是否是預期值？ –

沒有錯誤。圖表只是用新值更新而沒有任何轉換效果。通過源代碼，'doAnimation = animation && series.animate'產生'false'，因爲'series.animate'爲null！ – Leonard

我不需要重繪來查看更新的數據，但我也想知道爲什麼在柱形圖上沒有過渡效應。 – Ethereal

這仍然是一個謎。我設法讓軸更新，這表明有某種動畫正在進行，但它只適用於軸，而不是列。

最後，我已經解決了這個問題。

來源

2012-07-13 07:56:57 Leonard

你好Zanathel，我和你同樣的問題。數據更新時只需要動畫。所以現在你有沒有很好的解決方案？我正在嘗試但找不到答案 – riseres

我已經通過銷燬和再次創建圖表來解決了這個問題。

這裏是幫助我的highcharts論壇鏈接：http://forum.highcharts.com/highcharts-usage/animation-on-redraw-t8636/#p93199

答案來自highcharts支持團隊。

$(document).ready(function() { 
      var chartOptions = { 
        // Your chart options 
        series: [ 
          {name: 'Serie 1' , color: '#303AFF', data: [1,1,1,1,1,1,1} 
          ] 
       }; 

      var chart = new Highcharts.Chart(chartOptions); 

     $("#my_button").click(function(){ 
      chart.destroy(); 
      chartOptions.series[0].data = [10,5,2,10,5,2,10]; 
      chart = new Highcharts.Chart(chartOptions); 
     }); 
    });

來源

2013-10-15 15:59:18 kmas

這可能幫助：

var mychart = $("#mychart").highcharts();  
var height = mychart.renderTo.clientHeight; 
var width = mychart.renderTo.clientWidth; 
mychart.setSize(width, height);

更新所有圖表

$(Highcharts.charts).each(function(i,chart){ 
    var height = chart.renderTo.clientHeight; 
    var width = chart.renderTo.clientWidth; 
    chart.setSize(width, height); 
    });

來源

2015-10-19 12:22:32

Highcharts - 柱狀圖重繪動畫

回答

相關問題