Javascript 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-series，newSeriesThreshold=this.chart.series.length*2；
对于（变量i=0；i=newSeriesThreshold）{
此.chart.addSeries（series，false）；
}否则{
var currentSeries=此图表系列[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
    }
  };

var配置={
图表：{
renderTo:$（this.container）.attr（'id'），
类型：this.settings.type，
动画：{
持续时间：500，
放松：“摇摆”
}
},
标题：{
文本：空
},
图例：{
已启用：this.settings.legend.show
},
工具提示：{
格式化程序：函数（）{
将此.x.toFixed（0）+“：“+this.y.toString（）.toCurrency（0）+”；
}
},
xAxis：{
标题：{
文本：this.settings.xaxis.title，
风格：{
颜色：“#666”
}
}
},
亚克斯：{
标题：{
文本：this.settings.yaxis.title，
风格：{
颜色：“#666”
}
}
},
系列:系列,，
打印选项：{
专栏：{
颜色：“#FF7400”
}
},
学分：{
已启用：false
}
};

---

这会产生即时更新，而不会产生转换效果。你知道我做错了什么吗？

这仍然是个谜。我设法进行了轴更新，这表明有某种动画正在进行，但它只应用于轴，而不是列

---

最后，我解决了这个问题。

我通过销毁并重新创建图表解决了这个问题

以下是highcharts论坛上的链接，可以帮助我：

答案来自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);
        });
    });

这可能有助于：

var mychart=$（“#mychart”）.highcharts（）；
var height=mychart.renderTo.clientHeight；
var width=mychart.renderTo.clientWidth；
mychart.setSize（宽度、高度）；

更新所有图表

$（Highcharts.charts）。每个（函数（i，chart）{
变量高度=chart.renderTo.clientHeight；
var width=chart.renderTo.clientWidth；
图表.设置尺寸（宽度、高度）；
});

发生了什么错误？您可以记录数据响应以查看它是否为预期值吗？没有错误。图表仅使用新值更新，没有任何过渡效果。逐步浏览源代码，

doAnimation=animation&&series.animate

产生

false

作为

series.animate

为空！我不需要重新绘制来查看更新的数据，但我也很想知道为什么柱状图上没有过渡效果。答案是：这对我很有用……你好，扎纳瑟尔，我也有同样的问题。当数据更新时只需要动画。那么现在你有好的解决方案吗？我正在努力，但找不到答案