<!doctype html>
<meta charset="utf-8"/>
<head>
<script type="text/javascript">
var dataSet = {
"第一月份":95,
"第二月份":20,
"第三月份":84,
"第四月份":77,
"第五月份":90,
"第六月份":100
}
var markPollarChart= function(parent,dataset){
var p = document.createElement("div"),
builder = [];
builder.push("<ul class='chart'>");
for(var i in dataset){
builder.push("<li><em>") ;
builder.push(i) ;
builder.push("</em><span style='background-position: center -") ;
builder.push(dataset[i]) ;
builder.push("px'></span><strong>") ;
builder.push(dataset[i]) ;
builder.push("%</strong></li>") ;
}
builder.push("</ul>");
p.innerHTML = builder.join('');
parent.insertBefore(p,null);
}
window.onload = function(){
markPollarChart(document.getElementsByTagName("body")[0],dataSet);
}
</script>
<style type="text/css">
.chart {
list-style: none;
font-family: '宋体';
font-size: 14px;
border: 1px solid #ccc;
margin: 0;
padding: 5px;
background: #F2F1D7;
float: left;
}
.chart li {
width: 75px;
height: 140px;
float: left;
background: #DDF3FF url(img/o_pillar.gif) center center repeat-y;
}
.chart li em, .chart li span, .chart li strong {
display: block;
height: 20px;
text-align: center;
}
.chart li em, .chart li strong {
background: #DDF3FF;
}
.chart li span {
height: 100px;
background: transparent url(img/o_mask.jpg) no-repeat;
}
</style>
<head>
<body>
</body>
效果图：
相关推荐
JavaScript图表库，如"js chart js柱状图"，是一种用于在网页上创建交互式图形的工具，尤其适合展示数据。这些库通过JavaScript语言与HTML5的Canvas或SVG元素结合，能够动态地生成各种类型的图表，包括柱状图。柱状...
使用three.js绘制3d图表（柱状图，饼状图，环状图，面积图等）.zip使用three.js绘制3d图表（柱状图，饼状图，环状图，面积图等）.zip使用three.js绘制3d图表（柱状图，饼状图，环状图，面积图等）.zip使用three.js...
在这个"Three.js 三维坐标柱状图"项目中，我们将探讨如何利用Three.js 创建一个具有三维坐标轴的柱状图，并涉及坐标矢量的使用。 首先，让我们了解Three.js中的基本概念。在Three.js中，一切皆为对象，包括场景...
JavaScript柱状图是一种常见的数据可视化方法，用于呈现各种统计数据，如销售报告、比较不同类别数据等。在这种图表中，每个柱子的高度代表一个特定值，使得用户能够快速地理解和比较不同分类之间的数值差异。YAHoo...
"CSS+JS柱状图"是一种利用纯CSS和JavaScript实现的柱状图表，它可以帮助开发者创建动态且自定义程度高的图表，无需依赖第三方库如Highcharts或Chart.js。这种技术的优点在于其轻量级、灵活且可以完全控制图表的样式...
js柱状图的实现 您自己可能 通过修改里面的cs样式来 让表现出来的效果更美观
d3.js柱状图gif图片
【jqbar.js柱状图动态百分比进度条特效】是一种使用JavaScript库jqbar.js创建的交互式图表展示技术，主要用于动态地表示数据的百分比进度。这种特效在各种数据分析、项目管理或者用户界面设计中非常常见，因为它可以...
js 柱状图 统计 ，运用的是js技术中excel控件生成的一个图形控件
本教程将深入探讨如何在JavaScript中创建柱状图，并提供一个示例项目——"JS-Charts_demo"。 1. **基本概念**：柱状图由一系列垂直或水平的柱子组成，每个柱子代表一个类别或分组，其高度或长度表示该类别的数量或...
JavaScript柱形图是一种在网页上展示数据的有效方式，它通过矩形的高度来表示数值的大小，使得数据可视化更加直观易懂。"JS-charts"是一个专门用于创建柱形图的JavaScript开发库，提供了丰富的功能和自定义选项，...
JavaScript画图类库提供了一种方便的方式来创建各种图表，包括折线图、饼状图和柱状图。这些图表可以帮助我们更好地理解数据，并将复杂的信息以直观的方式呈现出来。 1. **JavaScript 画图类库** JavaScript 画图...
"js柱状图统计demo"是一个实例，它展示了如何利用JavaScript来创建柱状图，一种常见的数据可视化工具。在这个项目中，开发者提供了一个可以直接运行的HTML页面，通过引入特定的JS库，可以快速实现柱状图的绘制。 ...
在这个"CanvasJS柱形图消费统计表代码"中，我们主要探讨如何使用CanvasJS来制作一个柱状图，展示消费统计数据。 首先，`index.html`是网页的主文件，它将包含HTML结构，用于显示柱形图。在HTML中，你需要定义一个...
在JavaScript中，我们可以使用各种库来创建柱状图，例如ECharts、Highcharts、D3.js等。以ECharts为例，创建柱状图的基本步骤包括： 1. 引入ECharts库：在HTML文件中添加ECharts的CDN链接或者下载到本地并引入。 2. ...
在ExtJS 4.2中创建柱状图，首先你需要引入相关的类库，包括`Ext.chart.*`，这通常通过在页面中加载相应的CSS和JavaScript文件来实现。接下来，定义一个包含数据的Store，这个Store将提供图表的数据源。数据可以是...
JS柱状图、饼状图、线状图等图表常用于展示复杂的数据，帮助用户直观理解信息。本资源包含了一个JS库，专用于创建这些图形，让我们来详细探讨一下相关知识点。 首先，**柱状图（Bar Chart）**是一种常用的数据可视...
### JavaScript柱状图生成原理与实现 在网页开发中，数据可视化是不可或缺的一部分，而柱状图作为数据展示的一种常见形式，被广泛应用于各种场景。本文将深入解析如何使用JavaScript生成柱状图，并通过给定文件的...
柱状图在数据分析和可视化中扮演着重要角色，它能够清晰地展示各项数据之间的比较，使得数据更加直观易懂。本篇文章将详细讲解如何使用jQuery和CSS实现一个柱状图特效代码，帮助开发者构建出美观且功能丰富的图表...