工作需要，用javascript做一个统计图表：
完成后，做个笔记，大家分享一下，互相学习。其中还有点问题，还不是很完善。
其中参考了百度空间，中管理中心，访问统计，的js统计图表。但是应用上还是有差别，因为我做的这个项目中，需要时实的绘制新的统计表格，当有数据变化的时候，就会调用绘制表格的方法。所以要考虑页面性能的问题。

下面是完成后的预览图，可以看到，绘制一个表格，耗时0.005毫秒，也就是200分之一秒。效率我还是比较满意的！
目前在firefox，chrome，IE8，正常没问题，IE6下有问题，我现在已经不管IE6了，做前端的兄弟们要尽量引导用户放弃IE6啦。

全部代码如下：可复制直接运行。
现在有一个问题，求解，就是在firebug调试状态下，鼠标一旦移动到水平标尺线上，则报错！
哪位知道如何解决这个问题，请不吝赐教！谢谢！

javascript绘制图表全部代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>js柱状统计图</title>
<style type="text/css">
/*样式*/
#consuming_time{ font-size:12px; border:solid 1px #ccc; background-color:#f2f6fb; margin:10px 20px; height:40px; line-height:20px; padding:5px 10px; width:260px; }

#TwentyFourHourChart{ width:700px; height:240px; border:solid 1px #B3B3DC; position:relative; top:40px; left:20px; }

</style>

<script type="text/javascript">

window.onload = function () {

var _time = "开始绘制时间：" + thisMomentTime();

toDrawingChart([15, 26, 32, 33, 44, 55, 66, 57, 88, 92, 67, 42, 45, 61, 105, 33, 24, 15, 36, 27, 28, 29, 10, 22], [10, 20, 22, 23, 30, 35, 50, 40, 62, 78, 60, 40, 25, 58, 95, 15, 20, 8, 25, 20, 18, 20, 5, 12]);

_time += "<br/>绘制完成时间：" + thisMomentTime();

document.getElementById("consuming_time").innerHTML = _time;

//显示提示信息
toShowTipMessage();

};

function thisMomentTime() {

var m = (new Date).getHours() + "时 " + (new Date).getMinutes() + "分 " + (new Date).getSeconds() + "秒 " + (new Date).getMilliseconds() + "毫秒";
return m;
}

/*Array 数组扩展*/
Array.prototype.max = function () {
return Math.max.apply({}, this);
};

Array.prototype.min = function () {
return Math.min.apply({}, this);
};

//绘制24小时分时段呼入图形报表的函数
function toDrawingChart(/*String*/inCallsPerHour, /*String*/inCompletePerHour) {

var ic = document.getElementById("TwentyFourHourChart"); //页面上唯一的一个div，作为图表的容器

if (inCallsPerHour != null) {

var inCallMax = inCallsPerHour.max(); //从传入的数组中取得数组最大值，用到了一个自己写的array的扩展方法max()
var topOffsetPercent = 180 / inCallMax; //计算以最大值为基准的每像素显示比例，百分比
for (var i = 0; i < inCallsPerHour.length; i++) { //循环24小时数据

var sumrow = document.createElement("div"); //创建一个div元素sumrow
sumrow.id = "sumrow_" + i + "_" + inCallsPerHour[i];//为刚刚创建的div元素sumrow添加id属性（这里把时间，呼入电话总量数据写入到id中，后面显示这些信息的时候有用）
sumrow.setAttribute("class", "incallchartsumrow"); //添加属性

//设置元素的left（每个div宽度为10px，那么第i个元素就应该是i*10，因为还有一列10像素的组装图，所以还要*2，加上距离左侧40px边距 + 每2个柱状图为一组之间的间隔空隙6px，所以得出如下，）
sumrow.style.left = (i * 10) * 2 + (i * 6) + 40 + "px";

//高度的计算，Math.round四舍五入取值，百分比的基数 乘以 当前时段的呼入数据，为统计图的高度
sumrow.style.height = Math.round(topOffsetPercent * inCallsPerHour[i]) + "px";
sumrow.style.width = "10px"; //宽度10px像素
sumrow.style.position = "absolute"; //绝对定位
sumrow.style.overflow = "hidden"; //超出部分隐藏
sumrow.style.background = "none repeat scroll 0 0 #1280ef"; //背景颜色
sumrow.style.display = "block"; //块状显示

//距离容器上边框的距离，图表高度200 减去 当前这个柱状图图表高度
sumrow.style.top = 200 - Math.round(topOffsetPercent * inCallsPerHour[i]) + "px";
ic.appendChild(sumrow); //将创建的sumcow元素添加到ic容器中去

var timerow = document.createElement("div");
timerow.id = "timerow_" + i;
timerow.setAttribute("class", "callnum");
timerow.style.left = (10 * i) * 2 + (i * 6) + 40 + "px";
timerow.style.width = "10px";
timerow.style.position = "absolute";
timerow.style.top = "205px";
timerow.innerHTML = '<span style="font-size:12px; color:#666666;"> ' + i + '</span>';
ic.appendChild(timerow);

var cptrow = document.createElement("div");
cptrow.id = "cptrow_" + i + "_" + inCompletePerHour[i];
cptrow.setAttribute("class", "incallchartsumrow");
cptrow.style.width = "10px";
cptrow.style.height = Math.round(topOffsetPercent * inCompletePerHour[i]) + "px";
cptrow.style.position = "absolute";
cptrow.style.background = "none repeat scroll 0 0 #92be0f";
cptrow.style.left = (i * 10) * 2 + 10 + (i * 6) + 40 + "px";
cptrow.style.display = "block";
cptrow.style.top = 200 - Math.round(topOffsetPercent * inCompletePerHour[i]) + "px";
ic.appendChild(cptrow);
}

//绘制标尺线
for (var i = 0; i < 5; i++) {
var tity = document.createElement("div");
tity.setAttribute("class", "tity");
tity.style.width = "30px";
tity.style.position = "absolute";
tity.style.top = (36 * i) + (20 - 6) + "px";
tity.style.left = "15px";
tity.innerHTML = '<span style="font-size:12px; color:#666666;"> ' + Math.round(inCallMax - (inCallMax / 5) * i) + '</span>';
ic.appendChild(tity);

var liney = document.createElement("div");
liney.setAttribute("style", "width:620px; left:40px; border-top:1px dotted #B9B9B9; height:1px; line-height:1px; display:block; overflow:hidden; position:absolute; ");
liney.style.top = (36 * i) + 20 + "px";
ic.appendChild(liney);
}

} else {
icArea.innerHTML = '<div style="color:#0066cc; font-size:12px; margin:20px 0 0 80px;">暂无统计数据</div>';
}
}

//鼠标提示显示24小时实时>》呼入《<监控的详细数据
function toShowTipMessage() {
var nodes = document.getElementById("TwentyFourHourChart").getElementsByTagName("div");

for (var i = 0; i < nodes.length; i++) {
nodes[i].onmouseover = function () {

var temp = this.id.split("_");
var type = temp[0];
var hour = temp[1];
var times = temp[2];
var tipMessage = "";

var tip = document.createElement("div");
tip.id = "TipMessage";
tip.style.position = "absolute";
tip.style.top = (parseInt(document.getElementById(this.id).style.top.replace("px", "")) - 20) + "px";
tip.style.left = document.getElementById(this.id).style.left;

if (type == "sumrow") {
tipMessage = "今日" + hour + "时呼入" + times;

} else if (type == "cptrow") {
tipMessage = "今日" + hour + "时已接" + times;
}

tip.innerHTML = '<span style="font-size:12px; display:block; height:20px; background-color:#ffffff; padding:0px 2px; line-height:20px;">' + tipMessage + '</span>';
document.getElementById("TwentyFourHourChart").appendChild(tip);
}
nodes[i].onmouseout = function () {
var tip = document.getElementById("TipMessage");
document.getElementById("TwentyFourHourChart").removeChild(tip);
}
}
}

</script>
</head>
<body>

<!-- 下面这个div consuming_time 是为了显示左上角，绘制图表耗时显示之用，在实际使用中午用处 -->
<div id="consuming_time"></div>

<div id="TwentyFourHourChart">

</div>

</body>
</html>

把单页面传cnblogs的文件夹了，可以直接点击下载这个页面：
http://files.cnblogs.com/didi/jstable.rar 

这个图表做完了，还有点小小的遗憾，就是那个困扰我的，firebug调试状态，鼠标移动到水平标尺线上，报错！！

总结一下：javascript操作dom元素的基本功。绘制图表之前要有一个草稿，对于复杂的图表，必须在纸上画出来，才能有一个清晰的思维，开始进行编码。

转载于:https://www.cnblogs.com/didi/archive/2010/07/27/1786052.html

javascript柱状统计图表相关推荐

  1. VML 画统计 柱状、饼图、折线

    <!-- --> <!-- 涉及文件 alt.js / function.asp--> <!-- 必须包含页面所有代码 --> <!-- 高度定义有待改进 c ...

  2. 使用 Vml 制作立体柱状投票统计图的完整程序

    作者:lshdic   http://blog.csdn.net/lshdic/ <!--以下便是完整的 Js+Vml 制作柱状投票统计图的完整程序,保存为HTM文件运行即可看到效果 其中 ar ...

  3. 用echartsjs 实现动态绘制折线、柱状等图形，并实现多图联动效果

    echarts对于大数据处理后绘制折线图,柱形图等等的效果和速度都很好.下面我们介绍 怎么把封装的数据列表解析出来,动态绘图,并且实现鼠标联动效果 引入js文件: <script type=&q ...

  4. 【Axure高保真原型】柱状-折线组合图表原型模板

    今天和大家分享柱状-折线组合统计图表的原型模板,该模板用Axure原生元件制作而成,所以样式交互都可以任意修改.该模板用中继器制作,所以使用方便,在中继器表格中填写数据以及坐标最大值,既可以自动生成柱 ...

  5. echarts:饼、柱状、折线图的配置说明

    文章目录 前言 柱状图和折线图主要配置项: 饼图的基本配置项 series 数据项 有什么功能组件? 渐进式案例: vue中画一个基本的饼图 为它添加提示组件tooltip dataZom,用柱状图演 ...

  6. 用Python pyecharts v1.x 绘制图形（一）:柱状图、柱状堆叠图、条形图、直方图、帕累托图、饼图、圆环图、玫瑰图

    文章目录 关于pyecharts 柱状图 堆叠柱状图 条形图 直方图 帕累托图(复合图) 饼图 圆环图 玫瑰图 下一节 关于pyecharts pyecharts是一个用于生成echart(百度开源的 ...

  7. python横向柱状图-python绘制横向水平柱状条形图Bar

    python绘制横向水平柱状条形图Bar import matplotlib import random import matplotlib.pyplot as plt # 中文乱码和坐标轴负号处理. ...

  8. 柱状折线图2-双柱状重合堆积折线-重写图例点击事件

    本例子: 使用了formatter方法重写了提示层的展示数据 使用了双x轴实现重合 使用了stack实现堆积 使用了legendselectchanged和dispatchAction重写了图例点击事 ...

  9. Python的可视化包 – Matplotlib 2D图表(点图和线图,.柱状或饼状类型的图),3D图表(曲面图，散点图和柱状图)...

    Python的可视化包 – Matplotlib Matplotlib是Python中最常用的可视化工具之一, 可以非常方便地创建海量类型地2D图表和一些基本的3D图表.Matplotlib最早是为了 ...

最新文章

  1. 断网，启用网络，关机的实现。
  2. AKAP95 regulates splicing through scaffolding RNAs and RNA processing factoAKAP95通过支架RNA和RNA加工因子调控剪接
  3. form表单只提交数据而不进行页面跳转的解决方案
  4. LLYFSpy W.I.P
  5. 自动化控制之线程池的使用
  6. how to write a cover letter
  7. Python第二周 str的方法
  8. 区块链技术 好文收藏
  9. 人人都能学会的 Python 多线程指南！
  10. win7下注册s2008
  11. [Phonegap+Sencha Touch] 移动开发77 Cordova Hot Code Push插件实现自己主动更新App的Web内容...
  12. 多线程怎么保证数据安全_Python threading实现多线程 提高篇 线程同步，以及各种锁...
  13. java恐怖游戏_分享个经典恐怖游戏系列
  14. php 字符串偏移量,注意：PHP中未初始化的字符串偏移量
  15. 然后再带动更多的C++人逼起来
  16. Xbox One：未来的客厅主角
  17. Cannot add task ‘wrapper‘ as a task with that name already exists.
  18. 研究生们都在推荐哪些好用的论文在线翻译软件？
  19. win11中利用IIS10搭建asp网站
  20. 巴比特 | 元宇宙每日必读：42.46%的人年薪超过20万，元宇宙人才没有想象中的金贵？...

热门文章

  1. 补psp进度（11月4号-9号）
  2. STM32-内存管理
  3. Python学习笔记——文件写入和读取
  4. jQuery 中的 Ajax
  5. http 的一生: 一、特点与 URL解析
  6. 让wordpress首页不显示指定分类文章
  7. GridView中如何实现checkbox 默认选中
  8. Android10.0 Binder通信原理(三)-ServiceManager篇
  9. Instruments--CoreAnimation页面性能调试
  10. Flutter开发Flutter与原生OC、Java的交互通信-1（47)