Question

我目前已经分配了一个项目来使用javascript创建以下内容，您可以在此处查看最终产品：http://i1245.photobucket.com/albums/gg583/leetpete1994/Infografic-TrafficSources_zpsf50dfa6d.png

基本上我的工作是采用提供的PDF并创建一种动态显示图像传达的数据的方法。数据本身将在别处计算，所以我不得不担心的是接受每个烧杯的值，并适当填充它们。

我现在的想法：

现在我的想法是使用画布。我创建了一个烧杯类，然后将5个烧杯作为该类的一个实例。这很好用，我坐在一个画布上，在正确的位置有5个空烧杯。我把每个烧杯分成100个;然后我可以正确地填充每个像素的数量，无论它恰好是多少百分比，但这是我遇到问题的地方。每个烧杯都是不同的形状，每个烧杯都会变形。因此，我很难在烧杯中吸取液体。其次，如果我确实设法正确地吸取液体，它将涵盖烧杯的细节。如果我先用液体然后烧杯，这将是相反的问题。我也试过使用两个画布堆叠并控制液体的不透明度，但没有任何运气得到我想达到的效果。

那么，是否有更好的方法可以做到这一点，或者轻松地将奇怪的形状绘制到画布上？我开始认为使用画布不是最好的方法。我知道我可以在不同的液位下为每个图像制作几张图像，但我想避免在最终产品中使用那么多图像。

Answer 1

我相信您应该使用揭示方法解决问题......

每个空烧杯的一张图片，以及每个带有烧杯细节的全液体的一张图片。

然后将液体图像放在底部，并根据需要显示尽可能多的像素。

<div class="beaker">
    <div class="liquid"></div>
</div>

和

.beaker, .liquid {
    background: url('path-to-sprite-image.png') 0 100% no-repeat;
    width:130px;
}
.beaker {
    height:280px;
    position:relative;
}
.liquid {
    background-position: right 100%;
    bottom:0;
    left:0;
    position:absolute;
}

http://jsfiddle.net/27E5q/

的简单演示

Answer 2

这是使用Canvas获得所需效果的方法：

在烧杯透明的情况下绘制图像
逐渐从底部到顶部绘制原始图像
从而用透明的烧杯填充液体。

enter image description here

你可以花更多的时间来制作烧杯透明的东西;）

当然，您可以将图形分成几列，并以您需要的任何速率填充烧杯。

如果您需要不同的颜色来填充烧杯，您可以使用context.globalCompositeOperation =“destination-over”。此合成模式允许您在现有图形下“绘制”（新颜色仅填充现有图像上的透明像素）。

这是代码和小提琴：http://jsfiddle.net/m1erickson/Enyjb/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; }
    #canvas{border:1px solid red; border-radius:15px;}
    canvas{position:absolute;}
</style>

<script>
$(function(){

    window.requestAnimFrame = (function(callback) {
      return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
      function(callback) {
        window.setTimeout(callback, 1000 / 60);
      };
    })();


    // draw a background that fills the beakers with gray
    var background=document.getElementById("background");
    var bkCtx=background.getContext("2d");
    bkCtx.fillStyle="rgb(234,234,234)";
    bkCtx.fillRect(0,0,background.width,background.height);

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    var y;

    var img1=new Image();
    img1.onload=function(){
        ctx.drawImage(img1,0,0);
        y=img1.height-50;
        img2=new Image();
        img2.onload=function(){
            animate();
        }
        img2.src="https://dl.dropboxusercontent.com/u/139992952/temp01.png";
    }
    img1.src="https://dl.dropboxusercontent.com/u/139992952/temp02.png";


    var fps = 30;
    function animate() {
        setTimeout(function() {

            if(y<100){return;}

            requestAnimFrame(animate);

            // Drawing code goes here
            y-=1;
            ctx.drawImage(img2,
                          0,y,img2.width,img2.height-y,
                          0,y,img2.width,img2.height-y)


        }, 1000 / fps);
    }


}); // end $(function(){});
</script>

</head>

<body>
    <canvas id="background" width=1024 height=327></canvas>
    <canvas id="canvas" width=1024 height=327></canvas>
</body>
</html>

Answer 3

我不是数据可视化的专家，这可能是一种矫枉过正 - 但是 - 你可能想考虑使用D3.js：

http://d3js.org/

这是一个非常漂亮的绘图数据库。超级酷，看起来非常容易。

这是一个图库\示例页面：Gallery

*不，我不以任何方式与D3.js有联系（ - ！

祝你好运！

使用javascript处理动态信息图表的好方法？

3 个答案: