<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<style>
*{
padding:0;
margin:0;
}
body{
margin-top:20px;
margin-left:20px;
}
#out_div{
width:500px;
height:350px;
border:1px solid #000;
}
.title{
height:30px;
text-align:center;
line-height:30px;
font-size:18px;
font-weight:bold;
margin-bottom:10px;
}
.l{
height:24px;
padding-left:20px;
padding-right:20px;
float:left;
width:450px;
}
.l dd{
float:left;
}
.l1{
width:50px;
height:24px;
display:block;
line-height:24px;
float:left;
}
.l2{
width:4px;
height:24px;
border-top:1px solid #000;
border-right:1px solid #000;
float:left;
}
.l3{
height:24px;
line-height:24px;
float:left;
}
.l3 .rect{
height:14px;
width:100px;
background-color:#00F;
margin-top:4px;
float:left;
}
.l3 span{
float:left;
display:block;
margin-left:10px;
}
.b2{
width:4px;
height:8px;
display:block;
border-top:1px solid #000;
border-right:1px solid #000;
float:left;
}
.b3{
float:left;
height:30px;
display:block;
width:380px;
}
.b11,.b22{
display:block;
float:left;
}
.b11 dd{
height:5px;
width:49px;
display:block;
float:left;
border-right:1px solid #000;
border-top:1px solid #000;
}
dd.end{
width:20px;
border-right:none;
}
.b22{
margin-left:-5px;
margin-top:5px;
}
.b22 dd{
height:20px;
width:49px;
display:block;
border-right:1px solid #fff;
}
.bottom{
margin-top:10px;
float:left;
margin-left:200px;
}
.unit{
width:12px;
height:12px;
display:block;
background:blue;
float:left;
margin-right:10px;
}
</style>
</head>
<body>
<script>
/*
* 柱状图；
* ie8，ff，opera中可用，其他浏览器未测；
* ********made by keimon*********
* **********2013-01-17*************
*/
function chart(d){
var n=50;
var out = document.createElement('div');
$(out).attr('id','out_div');
var title = document.createElement('div');
$(title).addClass('title');
$(title).html(d.title);
$(out).append($(title));
var len = d.data.length;
for(var i=0; i<len; i++){
var dl = document.createElement('dl');
$(dl).addClass('l');
var d1 = document.createElement('dd');
$(d1).addClass('l1');
var d2 = document.createElement('dd');
$(d2).addClass('l2');
var d3 = document.createElement('dd');
$(d3).addClass('l3');
var rect = document.createElement('div');
$(rect).addClass('rect');
$(rect).css('width',d.data[i].v/n*50)
var num = document.createElement('span');
$(num).html(d.data[i].v)
$(d3).append($(rect)).append($(num));
$(dl).append($(d1)).append($(d2)).append($(d3));
$(out).append($(dl)); //
}
var dl2 = document.createElement('dl');
$(dl2).addClass('l');
var dd1 = document.createElement('dd');
$(dd1).addClass('l1');
var dd2 = document.createElement('dd');
$(dd2).addClass('b2');
var dd3 = document.createElement('dd');
$(dd3).addClass('b3');
var b11 = document.createElement('dl');
$(b11).addClass('b11')
for(var i=0; i<6; i++){
var dd11 = document.createElement('dd');
$(b11).append($(dd11));
}
var b22 = document.createElement('dl');
$(b22).addClass('b22')
for(var i=0; i<6; i++){
var dd22 = document.createElement('dd');
$(dd22).html(i*n);
$(b22).append($(dd22))
}
$(dd3).append($(b11)).append($(b22));
$(dl2).append($(dd1)).append($(dd2)).append($(dd3));
$(out).append($(dl2)); //
var bottom = document.createElement('div');
$(bottom).addClass('bottom');
var span = document.createElement('span');
$(span).addClass('unit');
var em = document.createElement('em');
$(em).html(d.list[0]);
$(bottom).append($(span)).append($(em));
$(out).append($(bottom)); //
$('body').append($(out));
}
function showchart()
{
var d = {
"title": "在线人数",
"list": ["在线人数"],
"data":[
{"n":"1小时","v":200},
{"n":"2小时","v":100},
{"n":"3小时","v":130},
{"n":"4小时","v":160},
{"n":"5小时","v":200},
{"n":"6小时","v":136},
{"n":"7小时","v":240},
{"n":"7小时","v":40}
]
};
chart(d);
}
showchart()
</script>
</body>
</html>
相关推荐
在这个主题中，我们将深入探讨如何使用jQuery实现柱状图和饼状图，这两种图表在数据可视化中非常常见，尤其适用于展示分类数据的比例或数量。 柱状图是一种条形图形，用于比较不同类别的数据。在jQuery中，可以通过...
2. **图表组件**：插件内置多种图表类型，如柱状图、折线图、饼图等，可快速创建美观的数据可视化效果。 3. **自定义选项**：用户可以根据需求调整各种图表参数，如颜色、大小、动画效果等，实现个性化定制。 4. *...
"jQuery实现的柱状图页面"是一个典型的案例，它利用JavaScript库jQuery和Highcharts插件来创建一个交互式的柱状图表。下面我们将深入探讨这个主题。 首先，jQuery是一个流行的JavaScript库，它简化了DOM操作、事件...
jQuery 3D透明蓄水池柱状图代码基于jquery-1.11.0.min.js制作，点击柱状图可动态改变高度值，百分比显示。
**jQuery Echarts 柱状图数据统计图表插件** jQuery Echarts插件是基于流行的JavaScript数据可视化库ECharts的一款扩展，它简化了ECharts在jQuery环境中的使用，提供了更友好的API接口，使得开发者可以更方便地创建...
使用jQuery的`.css()`方法可以动态改变柱状图的样式，如颜色、透明度等，实现动态效果。也可以利用`.animate()`函数添加平滑的过渡动画，增强用户体验。 6. **兼容性考虑**： 虽然现代浏览器倾向于使用SVG，但仍...
这段代码首先引入了jQuery和wijmo库，然后在文档加载完成后，使用jQuery选择器选取ID为"chart"的元素，并创建一个柱状图。 总之，wijmo-jQuery插件是一个强大的工具，能够帮助开发者快速构建具有专业级用户界面的...
在这个"JQuery生成静态柱状图实例"中，我们探讨的是如何使用JQuery来创建兼容多种浏览器（包括IE6、7、8以及Firefox）的柱状图表。 首先，柱状图是一种常见的数据可视化工具，它用垂直或水平的条形长度表示数值。在...
- Morris.js：基于Raphaël库，提供简单易用的折线图、柱状图和面积图。 - Flot：专为jQuery设计的图表库，支持折线图、饼图和堆叠图。 - Google Charts：谷歌提供的图表API，支持多种图表和自定义选项。 5. **...
2. 动态渲染：使用jQuery遍历数据数组，创建对应的头像和柱状图元素，并将其添加到页面上。 3. 事件绑定：为每个头像添加点击事件监听器。当用户点击头像时，对应的柱状图高度会增加，同时更新投票总数和显示结果。 ...
本篇文章将详细讲解如何使用jQuery和CSS实现一个柱状图特效代码，帮助开发者构建出美观且功能丰富的图表组件。 首先，jQuery是一个广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互。在...
在这个场景中，我们关注的是jQuery在报表和图表展示方面的应用，特别是饼状图和柱状图。 首先，jQuery报表通常指的是利用jQuery库来创建数据可视化工具，这些工具可以帮助用户更直观地理解数据。饼状图是一种将数据...
本示例将探讨如何利用jQuery库与Struts2框架来实现一个动态的柱状图，展示从后端获取的数据，并提供交互功能。 首先，jQuery是一个强大的JavaScript库，它的易用性和丰富的API使得开发者能够快速地处理DOM操作、...
Flot支持多种图表类型，包括线条图（lines）、折线图（points）、柱状图（bars）以及饼图（pie）。每种图表都有不同的配置选项，可以通过设置`series`参数来调整。 **3. 数据格式** Flot接受两种基本的数据格式：...
3. **多种图表类型**：支持线性图、柱状图、饼图等多种图表类型，满足不同数据展示需求。 4. **自定义样式**：可以通过CSS轻松定制图表的颜色、宽度、高度等样式属性，以匹配网页设计。 5. **动态更新**：可以实时...
本篇文章将详细探讨如何使用JQuery结合table数据来绘制折线图、柱状图和圆饼图，以增强数据展示的效果。 首先，我们需要引入JQuery库和用于数据可视化的插件jQuery-Visualize。jQuery-Visualize是一个基于JQuery的...
Jqplot支持多种图表类型，包括折线图、柱状图、饼图、散点图、雷达图等，这些图表可以满足大多数数据分析和展示的需求。通过简单的配置，开发者可以轻松地切换不同类型的图表，以适应不同的数据表现形式。 2. **...
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://code.highcharts.com/highcharts.js"></script> ``` 2. **准备数据**：在开始绘制图表之前，你需要准备好要展示的...
Bootstrap是世界上最流行的前端...<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"></script> ...
使用jQuery和一个图表库，如Chart.js，你可以创建一个柱状图。首先，你需要在HTML中定义一个canvas元素作为图表的容器，然后在JavaScript中设置数据和选项，最后调用Chart.js的`new Chart()`方法来绘制图表。 接着...