jquery实现动静态条形统计图

下图为jquery实现静态条形统计图，在选择题统计中用的比较多。

思路：前台JS实现动态数据效果，后台可以拼接字符串或者用JSON加载数据

代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="tiao.aspx.cs" Inherits="qiantaoflash.tiao" %>





 
 






 

jquery实现动态的条形统计图

代码如下：

页面布局如下:

 
 
 *
 {
  margin: 0 0 0 0;
  padding: 0 0 0 0;
 }
 .container
 {
  width: 300;
  height: 300;
  margin: 50 0 0 50;
  border: 1px solid green;
  float: left;
  background-image: url('/images/mubk.jpg');
 }
 .control
 {
  width: 280;
  height: 80;
  float: left;
  margin: 50 0 0 10;
  border: 1 solid #000000;
 }
 .item
 {
  height: 98%;
  width: 30px;
  border: 1 sollid green;
  background-color: #191970;
  display: inline-block;
  display: inline;
  margin-left: 10px;
  margin-top: 10px;
  text-align: center;
 }
 
 
 


 
 
  1
 
 
  2
 
 
  3
 
 
  4
 
 
  5
 
 
  6
 
 
  7
 
 
 
 
 
 

  这是一个段落标记
 
 
 

运行效果图:

 点击跳起来按钮效果:

以上内容是本文给大家分享的jquery实现动静态条形统计图，希望大家喜欢本文内容。