Анимированный линейный график в Javascript? - PullRequest
Новая
       50

Анимированный линейный график в Javascript?

13 голосов
/ 05 июня 2009

Я хотел бы сделать линейный график на веб-странице, используя Javascript. Я хочу, чтобы он был анимированным, чтобы при загрузке страницы линия медленно «рисовалась» на графике.

Мне удалось заставить статический график работать, используя flot , однако я не уверен, как его анимировать.

Было бы наполовину моя работа, чтобы просто нарисовать линию на полпути вдоль графика, но когда я пытаюсь сделать это путем изменения набора данных, он изменяет структуру график, так что линия заполняет 100% площади графика.

Так есть ли способ рисовать линейные данные поэтапно, чтобы я мог их анимировать?

Или, в качестве альтернативы, есть какая-то другая графическая структура JavaScript, которую я пропустил?

Ответы [ 7 ]

15 голосов
/ 05 июня 2009

Вот простой пример использования Flot 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Flot Examples</title>
<link href="layout.css" rel="stylesheet" type="text/css"></link>
<!--[if IE]><script language="javascript" type="text/javascript" src="../excanvas.pack.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="../jquery.js"></script>
<script language="javascript" type="text/javascript" src="../jquery.flot.js"></script>
</head>
<body>
<h1>Animated Flot Example</h1>
<div id="placeholder" style="width:600px;height:300px;"></div>
<script id="source" language="javascript" type="text/javascript">
$(function () {
    var linePoints = [[0, 3], [4, 8], [8, 5], [9, 13]];
    var i = 0;
    var arr = [[]];
    var timer = setInterval(function(){
     arr[0].push(linePoints[i]);
     $.plot($("#placeholder"), arr);
     i++;
     if(i === linePoints.length)
        clearInterval(timer);
    },300);
});
</script>
 </body>
</html>
5 голосов
/ 05 июня 2009

Думая вне рамок (поскольку окно, которое является flot, мне незнакомо), вы можете просто накрыть график с помощью div, который медленно отступает и отображает линию. Сокращение div в javascript - тривиальная задача даже без сторонних библиотек.

Edit:

Мне нужно было увидеть, насколько это было легко, поэтому я бросил все это за 10 минут. 

<html>
<head>
</head>
<body>

<div style="width:480px;height:480px;position:relative;">
<img onload="setTimeout(function(){reduce();}, interval);" src="http://images.freshmeat.net/editorials/r_intro/images/line-graph-1.jpg" />
<div id="dvCover" style="position:absolute;width:370px;height:320px;background-color:white;border:solid 1px white;top:70px;left:70px;"></div>color:white;border:solid 1px blue;top:70px;left:70px;"></div>
</div>

<script type="text/javascript">
var step = 3;
var interval = 20;
var cover = document.getElementById("dvCover");
var currentWidth = 370;
var currentLeft = 70;
setTimeout(function(){reduce();}, interval);

function reduce()
{
    if (currentWidth > 0)
    {
        currentWidth -= step;
        currentLeft += step;
        cover.style.width = currentWidth + "px";
        cover.style.left = currentLeft + "px";

        setTimeout(function(){reduce();}, interval);
    }
    else
    {
        cover.style.display = "none";
    }
}
</script>

</body>
</html>
2 голосов
/ 24 января 2014

Я написал библиотеку, которая сосредоточена на анимации графиков. Обратите внимание на анимацию при изменении размеров. Надеюсь, это поможет вам и всем остальным!

LYNE.JS 

https://github.com/bluejamesbond/Lyne.js/tree/master

GIF SAMPLE

enter image description here

ЖИВЫЕ ОБРАЗЦЫ 

http://bluejamesbond.github.io/Lyne.js/
1 голос
/ 05 июня 2009

Вы можете изменить flot. Я внес изменения в код flot раньше. Это довольно хорошо написано. Есть группа Google, если вы застряли.

Или вы можете просто научиться использовать Canvas, что и использует flot.

0 голосов
/ 24 сентября 2015

Я поместил серию библиотек графиков и диаграмм, которые будут служить вашей цели, а также помогут вам создать диаграмму или визуализацию, которые вам понравятся Посмотрите эту статью http://shivganesh.com/2015/05/infovizgeek-encyclopedia-for-visualization-tools/

0 голосов
/ 24 сентября 2015

Вы можете использовать d3js. Изучение d3 займет некоторое время, но это сила, то есть огромная и не имеющая аналогов.

https://www.quora.com/How-do-I-learn-D3-js

http://big -elephants.com / 2014-06 / разматывания линии-графики-d3js /

Несколько примеров визуализации d3:

Официальный сайт d3

Что-то, что я построил для НПО

0 голосов
/ 15 октября 2013

Я тоже хотел добавить анимацию горизонтальных линий в свои графики, к сожалению, для этого нет плагина.

пожалуйста, не стесняйтесь использовать плагин, который я создал для этого: http://www.codicode.com/art/jquery_flot_animator.aspx

...