您好,UncleToo欢迎您!  为了更好的浏览本站,请使用高版本浏览器
RSS  Tag     设为首页 | 加入收藏
 您所在的位置:首页 > 前端开发 > HTML5&CSS3

利用CSS3和jQuery创建曲线图和柱状图

作者:UncleToo  来源:原创  日期:2014-03-26 7:50:27
收藏  评论:( 1 )  阅读:1505

       本文给大家介绍利用CSS3和jQuery创建曲线图和柱状图。这里我们用到Flot这个工具。Flot是一款功能强大的纯JavaScript图表库。你可以点击这里了解Flot。


包括JavaScript文件

<script src="js/jquery.min.js"> </ SCRIPT>

<script src="js/jquery.flot.min.js"> </ SCRIPT>


添加图表数据

Flot插件是利用数组数据来生成图形

var graphData = [{
// Year 2011
data: [ [01, 1300], [02, 400], [03, 800], [04, 1500], [05, 2500], [06, 1200],
[07, 2000], [08, 850], [09, 1450], [10, 760], [11, 1560], [12, 2140] ],
color: '#0291e3'},
{
// Year 2012
data: [ [01, 1000], [02, 600], [03, 700], [04, 1200], [05, 1500], [06, 1200],
[07, 800], [08, 1950], [09, 2300], [10, 850], [11, 1250], [12, 1750] ],
color: '#ef4a01'
}];


生成线性图

$.plot($('#graph-lines'), graphData, {
series: {
       points: {
            show: true,
            radius: 5
       },
       lines: {
            show: true
       },
       shadowSize: 0
},
grid: {
       color: '#646464',
       borderColor: 'transparent',
       borderWidth: 20,
       hoverable: true
},
xaxis: {
       tickColor: 'transparent'
},
yaxis: {
       tickSize: 500
}
});


用HTML代码展示图形

<div id="graph-wrapper">
   <div class="graph-info">
       <a href="javascript:void(0)" class="visitors">2011年</a>
       <a href="javascript:void(0)" class="returning">2012年</a>
   </div>
   <div class="graph-container">
      <div id="graph-lines"></div>
   </div>
</div>


利用CSS3和jQuery创建曲线图和柱状图


下面我们还可以生成柱状图

$.plot($('#graph-bars'), bargraphData, {
series: {
bars: {
show: true,
barWidth: .7,
align: 'center'
},
shadowSize: 0
},
grid: {
color: '#646464',
borderColor: 'transparent',
borderWidth: 20,
hoverable: true
},
xaxis: {
ticks: [[1, "Jan"], [2, "Feb"], [3, "Mar"], [4, "Apr"], [5, "May"], [6, "Jun"],
[7, "Jul"], [8, "Aug"], [9, "Set"], [10, "Oct"], [11, "Nov"], [12, "Dec"]],
tickColor: 'transparent',
tickFormatter: 'string'},
yaxis: {
tickSize: 500
}
});


用HTML代码展示图形

<div id="graph-wrapper">
<div class="graph-info">
<a href="javascript:void(0)" class="visitors">2011年</a>
<a href="javascript:void(0)" class="returning">2012年</a>
</div>
<div class="graph-container">
<div id="graph-bars"></div>
</div>
</div>

利用CSS3和jQuery创建曲线图和柱状图




除非特别声明,本站所有PHP教程及其他教程/文章均为原创、翻译或网友投稿,版权均归UncleToo中文网所有, 转载请注明作者及出处。
原文网址:http://www.uncletoo.com/html/html5/880.html
读完这篇文章后,你是否有所收获? 分享是一种生活的信念!
  • 0
  • 0
我来说两句
更多>>网友评论