用jQuery实现的简单柱状统计图

  国庆闲着没事,把最近一个小程序中用到的统计图整理成了一个小插件,功能不多,一柱状图而已。新手初次写这种东西,一切以学习为目的,高手请嘴下留情……

下面是效果图(水平有限,难看了些):

使用方法:将jquery-1.10.2.js和leo.js两个js文件引入到你要使用的页面,然后在页面中添加以下代码:

  <div class="container" data-option='{"data_url":"data/grid.json"}'></div>  

其中class="container" 必须有且不可修改,data-option属性可以有两种值,对应两种使用leoChart的方法:

  第一种方法是data-option='{"data_url":"data/grid.json"}',将要显示的数据以json格式统一放在一个json文件中,data_url就是指定该json问件的位置;

json文件的格式如下:

[
{
"question":"1.What's your name?",
"answers":[
{"answer":"leo","value":50},
{"answer":"dragon","value":80},
{"answer":"stefan","value":77},
{"answer":"demon","value":65},
{"answer":"reberkah","value":74}
]
},
{
"question":"2.How old are you?",
"answers":[
{"answer":"~10","value":13},
{"answer":"11~20","value":46},
{"answer":"21~30","value":98},
{"answer":"31~40","value":78},
{"answer":"41~","value":65}
]
},
{
"question":"3.What' your interes?",
"answers":[
{"answer":"swimming","value":45},
{"answer":"basketball","value":89},
{"answer":"baseball","value":34}
]
},
{
"question":"4.What' your job?",
"answers":[
{"answer":"teacher","value":66},
{"answer":"ITer","value":56},
{"answer":"boss","value":89}
]
}
]

第二种方法是data-option='{"data":[{"question":"name?","answers":[{"answer":"leo","value":50},{"answer":"dragon","value":68}]}]}',直接将要显示的信息复制给data-option,数据的格式和第一种方法使用的json格式一样。

注意事项:1、json数据务必按标准照格式写,即key必须用双引号;

     2、由于安全性问题,再本地测试使用第一种方法时chrome和safari无法显示数据,移到web上就没问题了

源代码:http://pan.baidu.com/s/1qr1yV

原文地址:https://www.cnblogs.com/dragon-aslan/p/3354503.html