0

動的に更新される円グラフを作成するために、highcharts-ng を使用しています。

データが変更されると、スライスがアニメーション化されます (サイズが拡大または縮小します)。チャートの開始角度に関して同様の効果を達成しようとしています。

シリーズの startAngle プロパティが変更されたときに、トランジション アニメーションが発生するようにしたいと考えています。これが可能かどうかはわかりません。

これは開始角度の変化を示す JSFiddle ですが、アニメーションはありません。

http://jsfiddle.net/367gjasq/2/

これは、チャートの startAngle プロパティを現在どのように更新しているかを示す jsFiddle のコード スニペットです。

$scope.updateChartData = function() {
    //access to highcharts, though not using currently
    var h = $scope.chartConfig.getHighcharts();

    //register a change in series start angle
    $scope.chartConfig.series[1].startAngle += 20;

    //to make demo better, restart inner donut start angle
    if($scope.chartConfig.series[1].startAngle >= 0)
        $scope.chartConfig.series[1].startAngle = -360;

    //issue a digest so changes will reflect in chart
    $scope.$digest();
};
4

1 に答える 1

0

シリーズの開始角度の変化をアニメートする方法を見つけることができませんでした。

代わりに、シリーズの「ゴースト」要素を作成することにしました。これが私のシリーズ要素オブジェクトです

{
        name: 'empty',

        //make element transparent
        color: 'rgba(255, 255, 255, 0)',

        //cursor does not change on hover
        cursor: 'cursor',

       //so legend element won't disrupt actual legend display
       legendIndex: lastIndexOfLegend,

       // takes up the total size of 'empty space' required
        y: total - (aggregate)
      };

「空」の「キー」を持つポイントを監視するために、ツールチップフォーマッターを変更する必要もありました

if(this.key === 'empty') 
   return;

そのため、ホバー時にツールチップは表示されません

そして私の伝説のフォーマッタで

if(this.name === 'empty')
  return '';

undefined凡例に表示するように解決されたものは何も返しません

于 2015-10-13T20:34:41.207 に答える