13

Javascriptを使用してWebページで折れ線グラフを作成したいと思います。ページが読み込まれると、線がグラフにゆっくりと「描かれる」ようにアニメーション化したいと思います。

flotを使用して静的グラフを機能させることができましたが、アニメーション化する方法がわかりません。

グラフに沿って途中で線を引くだけでも私の仕事の半分は完了しますが、データセットを変更してこれを実行しようとすると、グラフの構造も変更されるため、線が塗りつぶされますグラフ領域の 100%。

ラインデータを段階的に描画してアニメーション化する方法はありますか?

あるいは、私が見落としている他の JavaScript グラフ作成フレームワークはありますか?

4

7 に答える 7

15

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>
于 2009-06-05T01:43:02.930 に答える
5

ボックスの外側を考えて (flot であるボックスは私にはなじみがないため)、ゆっくり後退して線を表示する div でグラフを覆うことができます。JavaScript で div を縮小することは、サード パーティのライブラリがなくても簡単です。

編集:

どれだけ簡単かを確認する必要があったので、約 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>
于 2009-06-05T00:55:27.660 に答える
3

グラフのアニメーションに重点を置いたライブラリを作成しました。サイズ変更中のアニメーションに注目してください。これがあなたと他のみんなに役立つことを願っています!

LYNE.JS

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

GIFサンプル

ここに画像の説明を入力

ライブサンプル

http://bluejamesbond.github.io/Lyne.js/
于 2014-01-24T01:20:25.473 に答える
1

flot を変更できます。以前に flot コードに変更を加えました。それはかなりよく書かれています。行き詰まった場合は、Google グループがあります。

または、 flot が使用する Canvas の使用方法を学ぶこともできます。

于 2009-06-05T00:50:33.847 に答える
0

私は、あなたの目的に役立つだけでなく、あなたが喜ぶチャートやビジュアライゼーションを作成するのに役立つ一連のグラフとチャート ライブラリを用意しました。この記事をご覧ください http://shivganesh.com/2015/05/infovizgeek-encyclopedia-for-visualization-tools/

于 2015-09-24T09:33:40.897 に答える
0

d3js を使用できます。d3 の学習には時間がかかりますが、その力は非常に強力で比類のないものです。

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

http://big-elephants.com/2014-06/unrolling-line-charts-d3js/

d3 ビジュアライゼーションのいくつかの例:

d3公式サイト

私がNGOのために作ったもの

于 2015-09-24T07:52:26.057 に答える