麻烦动画HighCharts列标签的svgX

Question

BOUNTY更新：我在这方面作出了一个赏金，所以我想提供更多的信息，以防有人提出不同的解决方案而不是修改我的代码。目标是为条形图和柱形图在HighCharts中为实际类别位置设置动画。动画的实际“酒吧/列”似乎内置于HighCharts，然而，标签位置是我遇到的麻烦。请参阅下面的JSFiddle。 另外，我知道这个问题是关于SVG的，但我也需要IE8中的动画支持。

我目前的任务是为条形图和柱形图在HighCharts中对类别进行重组。

我条形图做工精细，用重组类别和标签的能力，用标签用下面的代码动画：

$(this).animate({'svgY': c.labelPositions[myX]}, {'duration': animDuration, 'queue': false}); 

现在我的工作列上，和我有显著麻烦让标签动画。该代码是相对一致的：

$(this).animate({'svgX': c.labelPositions[myX]}, {'duration': animDuration, 'queue': false}); 

我使用jQuery SVG允许SVG元素的动画，你可以找到它here。

您可以查看我正在从事的jsFiddle here。只需点击每个图表下方的“开始”按钮即可看到它们在运行。

允许类别动画的实际“黑客”是Highcharts.Series.prototype.update = function(changes, callback){函数。

只是试图让某些东西起作用，我发现我可以为列标签的svgY制作动画，但svgX似乎根本不起作用。

实际HighCharts.js黑客受欢迎。

Answer 1

我看了一下你的代码并改进了一下。我做了以下内容：使用存储我们要更新

删除jQuerySVG依赖属性单一变量列/条

• 统一代码，而不是我的代码使用内置Highcharts动画方法
• 修复了一些小错误

我测试了这个IE7 +/Chrome/Firefox，它在所有这些工作正常。

在这里，你可以找到我的版本Highcharts.Series.prototype.update的：

Highcharts.Series.prototype.update = function (changes, callback) { 
    var series = this, 
     chart = this.chart, 
     options = chart.options, 
     axis = chart.xAxis[0], 
     ticks = axis.ticks, 
     type = chart.options.chart.type, 
     animDuration = 400, 
     attr = type === 'bar' ? 'y' : 'x', 
     animOpt = {}, 
     text; 

    if (options.chart.animation && options.chart.animation.duration) { 
     animDuration = options.chart.animation.duration; 
    } 

    if (type == "bar" || type == "column") { 

     if (typeof chart.labelPositions === "undefined") { 
      chart.labelPositions = []; 

      $.each(ticks, function() { 
       chart.labelPositions.push(this.label[attr]); 
      }); 
     } 


     for (var category in changes) { 

      for (var i = 0; i < series.points.length; i++) { 

       if (typeof series.points[i].originalCategory === "undefined") { 
        series.points[i].originalCategory = series.points[i].category; 
       } 

       if (series.points[i].originalCategory == category) { 

        $.each(ticks, function() { 
         text = this.label.text || this.label.element.innerHTML; // use innerHTML for oldIE 
         if (text == category) { 
          var myX = (typeof changes[category].x !== "undefined") ? changes[category].x : series.points[i].x; 
          series.points[i].update(changes[category], false, { 
           duration: animDuration 
          }); 

          animOpt[attr] = parseInt(chart.labelPositions[myX]); 

          // This is the line that animates the bar chart labels. 
          this.label.animate(animOpt, { 
           'duration': animDuration, 
           'queue': false 
          }); 

          return false; 
         } 
        }); 
       } 
      } 
     } 

     chart.redraw(); 

     if (typeof callback !== "undefined") { 
      setTimeout(function() { callback(); }, animDuration); 
     } 
    } 
} 

查看演示：http://jsfiddle.net/evq5s/17