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

本文介绍了一个使用jQuery实现的简单柱状统计图,适用于新手学习。该插件名为leo.js,通过data-option属性配置数据源,支持从JSON文件或直接在HTML中指定数据。JSON数据结构包含问题和各个答案及其对应的值。由于安全限制,本地测试可能在某些浏览器中无法显示数据,但在Web环境中正常。
摘要由CSDN通过智能技术生成

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

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

使用方法:将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?"

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值