麻煩動畫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