javascript - ハイチャート - デフォルト以外のアニメーション

Question

Highcharts JS ( highcharts.com ) に、チャートの読み込み時にアニメーションを変更するオプションはありますか? 現在、縦棒グラフでは、縦棒が下から上にスライドします。デフォルトのアニメーションをバウンスなどに変更することはできますか?

Answer 1

確かに、チャート オプションにアニメーションの継続時間とイージング オプションを追加します。たとえば、バウンスするには:

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        animation: {
            duration: 1500,
            easing: 'easeOutBounce'
        }
    },
    ...
});

ここに見られる例http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/chart/animation-easing/

Answer 2

ローディング アニメーションは、'loading' オプションを使用して制御できます。テーマを設定できる CSS オブジェクトを定義します。アニメーション画像を背景として使用して、ローディング表示をアニメーション化できます。http://highcharts.com/ref/#loading

オプションの lang プロパティを介して表示されるテキストを変更するには。詳細については、 http://highcharts.com/ref/#langを参照してください。私は通常、空白に設定します。

var options = {
  style: { background: 'url(/images/3044/chart_curve.png) no-repeat center' }, 
  lang: { loading: '' } 
};
var chart = new Highcharts.Chart(options);

さらに、CSS オブジェクトを表示するには、chart.showLoading(); を呼び出す必要があります。

Answer 3

チャートの代わりに「シリーズ」オブジェクトの下に移動されました

http://api.highcharts.com/highstock#plotOptions.series

このようなもの：

    series: [{
        animation:{
          duration: 10000  
        },
        type: 'pie',
        name: 'Percentuale per periodo',
        data: [
            ['2 anni',   13.0],
            ['3 anni',      41],
            ['4 anni',    17],
            ['5 anni',     17],
            ['7 anni',   4],
            ['8 anni',   8]
        ]
    }]