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 - 柱状图重绘动画

回答

相关问题