Javascript实时柱状图实现代码

实时柱状图

span{ background-color:lime;font-size:1px;}

var arr = new Array(1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1);

function showimage()
{
var newdata = Math.ceil(Math.random()*200); //得到1-200之间的整数
arr = arr.slice(1);
arr[99] = newdata;
var str = "";
for(var i=0;i";
}
show.innerHTML = str ;
span1.innerText = newdata;
if(newdata>180)newdata=180
span2.style.height = newdata;
window.setTimeout("showimage()",300);
}
//我们 www.jb51.net


200

100

0

50

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

赞 (0)

相关推荐

  • D3.js 从P元素的创建开始(显示可加载数据)

    D3.js 从P元素的创建开始(显示可加载数据)

    D3是一个基于数据操作的可视化js库,认识d3,就从最基础的显示可加载数据谈起. html的基本框架不多说,先上代码再解释: 新建一个test目录,在该目录下创建demo和d3两个文件夹.demo存放要编写的html文件 , d3存放d3.v3.js 在demo文件夹下新建indexP.html,将下面代码复制其中,双击在浏览器打开查看效果. <!DOCTYPE html> <html lang="en"> <head> <meta chars

  • D3.js实现柱状图的方法详解

    D3.js实现柱状图的方法详解

    D3.js介绍 D3.js 是一个基于数据操作文档JavaScript库.D3帮助你给数据带来活力通过使用HTML.SVG和CSS.D3重视Web标准为你提供现代浏览器的全部功能,而不是给你一个专有的框架.结合强大的可视化组件和数据驱动方式Dom操作.这里也可以看到它是用SVG来呈现图表的,所以使用D3.js是需要一定的SVG基础的. 如何用D3.js实现柱状图? 柱状图里面有坐标轴和柱子.然而我们还需要SVG画布来画这些东西.先把大概的画图框架搭起来,代码如下(请注意此时我在body标签里添加

  • jQuery.Highcharts.js绘制柱状图饼状图曲线图

    在数据统计和分析业务中,有时会遇到客户需要在一个图表中将柱状图.饼状图.曲线图的都体现出来,即可以从柱状图中看出具体数据.又能从曲线图中看出变化趋势,还能从饼状图中看出各部分数据比重.Highcharts可以轻松实现三图合一的效果. 复制代码 代码如下: var chart;             $(document).ready(function() {                 chart = new Highcharts.Chart({                     c

  • JavaScript根据数据生成百分比图和柱状图的实例代码

    复制代码 代码如下: <HTML> <head> <title>JS百分比图和柱状图</title>   <xml:namespace prefix="v"/>   <style>    v\:* {behavior=url(#default#VML)}   </style>   <style>   a:hover {color:maroon}   h2 {color:#006600;  

  • D3.js中data(), enter() 和 exit()的问题详解

    D3的应用非常广泛,现在成为了主流数据可视化工具之一.大家在刚接触使用d3.js的时候,感到最吃力的地方是data(), enter(), exit()这几个操作. 在我接触一段时间,有了一些了解之后,简单说说我的理解. data() 先看一个例子: <body> <p></p> <p></p> <p></p> </body> 执行代码: d3.select("body").selectAl

  • 基于d3.js实现实时刷新的折线图

    基于d3.js实现实时刷新的折线图

    先来看看效果图 下面直接上源代码,html文件 <html> <head> <meta charset="utf-8"> <title>实时刷新折线图</title> <style> .axis path, .axis line{ fill: none; stroke: black; shape-rendering: crispEdges; } .axis text { font-family: sans-seri

  • JavaScript可视化图表库D3.js API中文参考

    D3库所提供的所有 API 都在 d3 命名空间下.d3 库使用语义版本命名法(semantic versioning). 你可以用 d3.version 查看当前的版本信息. d3 (核心部分) 选择集 d3.select - 从当前文档中选择一系列元素. d3.selectAll - 从当前文档中选择多项元素. selection.attr - 设置或获取指定属性. selection.classed - 添加或删除选定元素的 CSS 类(CSS class). selection.styl

  • PHP 柱状图实现代码

    PHP 柱状图实现代码

    还有疑问的朋友可以加我QQ:460634320,大家一起讨论. 效果图: 复制代码 代码如下: <?php function createImage($data,$twidth,$tspace,$height){ header("Content-Type:image/jpeg"); $dataname = array(); $datavalue = array();//data里面的值 $i = 0; $j = 0; $k = 0; $num = sizeof($data); f

  • php报表之jpgraph柱状图实例代码

    php报表之jpgraph柱状图实例代码

    新手初识jpgraph肯定会遇到各种各样的问题,比如乱码什么的,本案例是jpgraph3.0.7制作,也经过本人的多次实验,解决乱码问题 复制代码 代码如下: <?php $datay=array(); //纵坐标数据 $datax=array(); //横坐标数据 foreach ($usernums as $key => $value){ $datay[] = $value; $datax[] = $userids[$key]; } require_once ('jpgraph-3.0.7

  • 从数据库中取出最近三十天的数据并生成柱状图

    从数据库中取出最近三十天的数据并生成柱状图

    在终端用cd 命令进入文件目录 说明:此处例子我是拿项目中的一个例子讲解的. 1.新建一个项目 :用终端输入:zf create project Airline 格式:zf create action project project-name 备注:这些格式可以在终端输入zf 查看 2.新建一个action :zf create action dirgramshow index 格式:zf create action action-name controller-name 3.新建一个 mode

随机推荐