这段时间比较空闲，便阅读公司做好的项目的源代码，学习学习同事的开发思路。
在项目中使用图表可以很好地提高人机交互的友好度，开发的时候看到项目的首页有两个很小的柱形图，很漂亮，便找到对应的代码看了看，发现非常简单，原来是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的官网有很多实例，可以看看。