jquery实现静态柱形图（写死的数据，只为系统首页UI更美观）

这段时间比较空闲，便阅读公司做好的项目的源代码，学习学习同事的开发思路。

在项目中使用图表可以很好地提高人机交互的友好度，开发的时候看到项目的首页有两个很小的柱形图，很漂亮，便找到对应的代码看了看，发现非常简单，原来是jquery中的效果。

效果图：

要实现上面的效果，需要引入两个文件，core.css和jquery.core.js。 这里可以下载

 代码如下：

<div class="table-box">
　　<div class="table-detail">
　　　　<h4 class="m-t-0 m-b-5"><b class="counter" id="todoCount">0</b></h4>
　　　　<p class="text-muted m-b-0 m-t-0"><fmt:message key="page.title.todo"/></p>
　　</div>
　　<div class="table-detail text-right">
　　　　<span data-plugin="peity-bar" data-colors="#2098BA,#ebeff2" data-width="60"
　　　　　 　　data-height="45">5,3,9,6,5,9,7,3,5,2,9,7,2,1</span>
　　</div>
</div>

 

5,3,9,6,5,9,7,3,5,2,9,7,2,1
这几个数字，一个对应一根柱子。

在jquery.core.js中搜索关键字：peity-bar，会发现还可以用类似的方法生成饼图、折线图、圆圈图。

缺点是：用这个方法生成的图表是静态的。

如果想要动态的图表，可以用highcharts或者echarts，highcharts和echarts的官网有很多实例，可以看看。

转载于:https://www.cnblogs.com/daihu/p/10180418.html