【问题标题】:Animated line graph in Javascript?Javascript中的动画折线图?
【发布时间】:2015-09-24 17:33:40
【问题描述】:

我想使用 Javascript 在网页上制作折线图。我希望它具有动画效果,以便在页面加载时,线条会慢慢“绘制”到图表上。

我已经使用flot 设法使静态图正常工作,但是我不确定如何对其进行动画处理。

只要让它沿着图表画一条线中途就完成了我的一半工作,但是当我尝试通过修改数据集来做到这一点时,它会修改图形也是如此,使线条填充图形区域的 100%。

那么有没有办法分阶段绘制线条数据,让我可以动画呢?

或者,还有其他一些我忽略的 javascript 图形框架吗?

【问题讨论】:

    标签: javascript graph flot animated


    【解决方案1】:

    这是一个使用 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>
    

    【讨论】:

    • 呃……我怎么没想到+1
    【解决方案2】:

    跳出框框思考(因为我不熟悉浮动框),你可以用一个缓慢后退并显示线条的 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>
    

    【讨论】:

    • 非常简单,但令人印象深刻的 +1
    • 这是一个很棒的主意。麻烦的是,覆盖的 div 会掩盖图表上的线条。但是,嘿,总比没有好!
    • @Jonathan:根据图表背景的复杂程度,您也许可以在叠加层 div 上放置匹配的背景。
    • @Joel Potter,是的,我想过这样做,但它行不通,因为范围可能变化很大。但我想我会去掉线条,只在白色背景上显示情节。无论如何可能看起来更好。
    【解决方案3】:

    我编写了一个专注于图形动画的库。注意调整大小期间的动画。希望这对您和其他所有人都有帮助!

    LYNE.JS

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

    GIF 样本

    现场样本

    http://bluejamesbond.github.io/Lyne.js/
    

    【讨论】:

      【解决方案4】:

      你可以修改flot.我之前对浮动代码进行了更改。写得还算不错。如果你遇到困难,有一个谷歌小组。

      或者你可以学习如何使用 Canvas,这就是 flot 所使用的。

      【讨论】:

        【解决方案5】:

        我也想在我的浮动图表中添加水平线动画,不幸的是没有插件可以做到这一点。

        请随意使用我创建的插件来做到这一点:http://www.codicode.com/art/jquery_flot_animator.aspx

        【讨论】:

          【解决方案6】:

          您可以使用 d3js。学习 d3 需要一些时间,但它的力量是巨大且无与伦比的。

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

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

          d3 可视化的几个示例:

          Official d3 Website

          Something I've built for an NGO

          【讨论】:

            【解决方案7】:

            我提供了一系列图表和图表库,它们可以满足您的目的并帮助您创建您喜欢的图表或可视化。看看这篇文章http://shivganesh.com/2015/05/infovizgeek-encyclopedia-for-visualization-tools/

            【讨论】:

              猜你喜欢
              • 1970-01-01
              • 2021-02-25
              • 1970-01-01
              • 1970-01-01
              • 2013-02-26
              • 1970-01-01
              • 2022-06-28
              • 1970-01-01
              • 2017-06-14
              相关资源
              最近更新 更多