无法为 HighCharts 列标签的 svgX 设置动画

Question

赏金更新：我为此悬赏，所以我想提供更多信息，以防有人提出与修改我的代码不同的解决方案。目标是为条形图和柱形图在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。只需点击每个图表下方的“开始”按钮即可查看它们的实际效果。

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

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

欢迎实际的HighCharts.js hack。

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