jquery实现动静态条形统计图

(编辑：jimmy 日期: 2026/3/3 浏览：3 次 )

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

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

代码：

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
 <title>青苹果条形统计</title>
 <link href="css/jQuery.spider.poll.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery-1.4.3.min.js">

jquery实现动态的条形统计图
代码如下：
页面布局如下:





<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
 <title></title>
 <style type="text/css">
 *
 {
  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;
 }
 </style>
 <script src="/UploadFiles/2021-04-02/jquery-1.4.1.js">

运行效果图:

 点击跳起来按钮效果:



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

上一篇：JavaScript判断表单中多选框checkbox选中个数的方法
下一篇：JS实现的5级联动Select下拉选择框实例

一句话新闻

一文看懂荣耀MagicBook Pro 16

荣耀猎人回归！七大亮点看懂不只是轻薄本，更是游戏本的MagicBook Pro 16.
人们对于笔记本电脑有一个固有印象：要么轻薄但性能一般，要么性能强劲但笨重臃肿。然而，今年荣耀新推出的MagicBook Pro 16刷新了人们的认知——发布会上，荣耀宣布猎人游戏本正式回归，称其继承了荣耀 HUNTER 基因，并自信地为其打出“轻薄本，更是游戏本”的口号。
众所周知，寻求轻薄本的用户普遍更看重便携性、外观造型、静谧性和打字办公等用机体验，而寻求游戏本的用户则普遍更看重硬件配置、性能释放等硬核指标。把两个看似难以相干的产品融合到一起，我们不禁对它产生了强烈的好奇：作为代表荣耀猎人游戏本的跨界新物种，它究竟做了哪些平衡以兼顾不同人群的各类需求呢？

友情链接:杰晶网络 DDR爱好者之家南强小屋黑松山资源网白云城资源网 SiteMap