Highcharts - анимации, отличные от стандартных - PullRequest
6 голосов
/ 31 августа 2010

Есть ли опция в Highcharts JS ( highcharts.com ), чтобы изменить анимацию при загрузке диаграммы?Прямо сейчас на столбчатой ​​диаграмме столбцы скользят снизу вверх.Можно ли изменить анимацию по умолчанию, скажем, на отскок?

Ответы [ 4 ]

12 голосов
/ 22 ноября 2012

Конечно, к вашим параметрам диаграммы добавьте длительность анимации и параметры замедления. Например, чтобы сбросить:

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/

8 голосов
/ 15 марта 2011

Анимацией загрузки можно управлять с помощью опции «загрузка». Он определяет 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 ();

3 голосов
/ 12 февраля 2014

Перемещено под объектом "серия" вместо графика

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]
        ]
    }]
1 голос
/ 25 сентября 2013

Я не вижу никакого анимационного эффекта от ответа, ссылающегося на скрипку:

Пример, видимый здесь http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/chart/animation-easing/

Даже пробуя повышенное значение, как здесь: http://jsfiddle.net/p9EuZ/

    chart: {
        animation: {
            duration: 6222500,
            easing: 'easeOutBounce'
        }
    }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...