Question

BOUNTY UPDATE：我正在为此付出一笔赏金，所以我想提供更多信息，以防有人提出与修改我的代码不同的解决方案。对象是为条形图和柱形图在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。

您可以查看我在here处理的jsFiddle。只需点击每个图表下方的“开始”按钮即可查看它们的实际效果。

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

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

欢迎实际HighCharts.js黑客。

Answer 1

我查看了你的代码并对其进行了一些改进。我做了以下事情：

使用存储我们要更新的属性的单个变量的列/栏的统一代码
删除了jQuerySVG依赖项，而我的代码使用内置的Highcharts animate方法
修正了一些小错误

我使用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

麻烦动画HighCharts列标签的svgX

1 个答案: