zoukankan      html  css  js  c++  java
  • D3.js-数值自动变动的条形图表

     

     1 <p>
     2 <style><!--
     3 button{
     4     background-color:#aaaaaa;
     5     font-family:微软雅黑;
     6     font-size:12px;
     7     color:#ffffff;
     8     width:50px;
     9     height:30px;
    10 }
    11 button:hover{
    12     background-color:#6482F7;
    13     color:#ff0000;
    14 }
    15 #container{
    16     background:#9a9a9a;
    17     width:50%;
    18     height:280px;
    19     padding:0px 10px;
    20     margin:0px;
    21 }
    22 div.hbar{
    23     background-color:#3EA35F;
    24     margin:5px;
    25 }
    26 div.hbar span{
    27     color:#ffffff;
    28     font-family:微软雅黑;
    29     font-size:10px;
    30     margin-left:10px;
    31 }
    32 --></style>
    33 <button onclick="int=setInterval(myTimer,1000)">开始</button><button onclick="int=window.clearInterval(int)">停止</button>
    34 <div id="container"></div>
    35 <p>
    36 <script type="text/javascript" src="http://files.cnblogs.com/files/alexywt/d3.js"></script>
    37 <script type="text/javascript">// <![CDATA[
    38 var data=[10,15,30,50,80,65,55,30,20,10,8];
    39 function render(){
    40     d3.select("#container").selectAll("div.hbar").data(data)
    41         .enter().append("div").attr("class","hbar").append("span");
    42     d3.select("#container").selectAll("div.hbar").data(data)
    43         .style("width",function(d){return (d*3)+"px";}).select("span").text(function(d){return d;});
    44     d3.select("#container").selectAll("div.hbar").data(data)
    45         .exit().remove();
    46 }
    47 function myTimer(){
    48     data.shift();
    49     data.push(Math.round(Math.random()*100));
    50     render(data);
    51 }
    52 var int=setInterval(myTimer,1000);
    53 render(data);
    54 // ]]></script>
    55 </p>
  • 相关阅读:
    发起qq临时会话
    easyUI-textbox回车获取不到正确的textbox值问题
    Linq in条件查询
    常用js-API
    MVC4不支持EF6解决方案 && Nuget控制台操作说明
    JS报表打印分页CSS
    关于phpinfo页面展开的渗透
    基于phpmyadmin的攻击
    upload_labs靶场
    文件上传漏洞
  • 原文地址:https://www.cnblogs.com/alexywt/p/5109525.html
Copyright © 2011-2022 走看看