0

赏金更新：我为此悬赏，所以我想提供更多信息，以防有人提出与修改我的代码不同的解决方案。目标是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 元素的动画，你可以在这里找到它。

你可以在这里查看我正在处理的 jsFiddle 。只需单击每个图表下方的“开始”按钮即可查看它们的运行情况。

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

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

欢迎实际HighCharts.js的黑客攻击。

4

1 回答 1

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

于 2013-03-21T13:22:59.700 回答