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});

私はSVG要素のアニメーションを許可するために使用しています。ここでjQuery SVG見つけることができます。

ここで私が取り組んでいるjsFiddleを見ることができます。各チャートの下にある[実行]ボタンをクリックするだけで、実際の動作を確認できます。

カテゴリのアニメーション化を可能にする実際の「ハック」はHighcharts.Series.prototype.update = function(changes, callback){関数です。

何かを機能させるために遊んでみたところsvgY、列ラベルをアニメーション化できることがわかりましたが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 に答える