Задать вопрос
lamo4ok
@lamo4ok
Программист

Каким решением наиболее оптимально нарисовать и анимировать данный граф?

Есть необходимость строить такой граф на JS:
f0545c15fae0483f99b84c9c7e929514.png
и анимировать его построение. Анимация требуется довольно простая — за некое время постепенно показывать все точки, начиная например с самой нижней и постепенно показывая все точки до верха.

Чем наиболее просто и "красиво" рисовать такое? График будет на самом деле всегда один и тот же, в смысле что его точки будут находиться на одном и том же месте, просто каждый раз по событию нужно заново его строить.
  • Вопрос задан
  • 211 просмотров
Подписаться 3 Оценить Комментировать
Решения вопроса 2
initrd0
@initrd0
Это я =)
Пользуюсь этой штукой: www.jqplot.com
С поставленной задачей справится. Остается вопрос оптимальности.
Ответ написан
lamo4ok
@lamo4ok Автор вопроса
Программист
В общем сам нашел вариант, который устроил более остальных: chartist-js. Реализуется примерно вот так:
var chart = new Chartist.Line('#savings_calculator .graph', {
    series: [
        [1, 1.6, 2.8, 2.7, 3.1, 3.4, 3.8, 4.5, 5.7, 5.6, 7.5, 9.5]
    ]
}, {
    axisX: {
        showLabel: false,
        showGrid: false
    },
    axisY: {
        showLabel: false,
        showGrid: false
    },
    lineSmooth: false,
    low: 0
});

// Let's put a sequence number aside so we can use it in the event callbacks
var seq = 0,
    delays = 100,
    durations = 10;

// On each drawn element by Chartist we use the Chartist.Svg API to trigger SMIL animations
chart.on('draw', function(data) {
    seq++;

    if(data.type === 'line') {
        // If the drawn element is a line we do a simple opacity fade in. This could also be achieved using CSS3 animations.
        data.element.animate({
            opacity: {
                // The delay when we like to start the animation
                begin: seq * delays + 0,
                // Duration of the animation
                dur: durations,
                // The value where the animation should start
                from: 0,
                // The value where it should end
                to: 1
            }
        });
    } else if(data.type === 'point') {
        data.element.animate({
            x1: {
                begin: seq * delays,
                dur: durations,
                from: data.x - 10,
                to: data.x,
                easing: 'easeOutQuart'
            },
            x2: {
                begin: seq * delays,
                dur: durations,
                from: data.x - 10,
                to: data.x,
                easing: 'easeOutQuart'
            },
            opacity: {
                begin: seq * delays,
                dur: durations,
                from: 0,
                to: 1,
                easing: 'easeOutQuart'
            },
        });
    }
});
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
neluzhin
@neluzhin
Может, вам подойдет Highcharts? Похожая анимация из работает коробки: демо.

Очень мощная библиотека с хреновой тучей настроек и не лагает даже при нескольких миллионах отметок на графиках (работает через canvas), но есть большой минус - для использования в коммерческих проектах надо покупать лицензию.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы