最近项目中展示数据有用到amcharts,一个小demo例子。

 <script src="<%=basePath%>amchart/amcharts.js" type="text/javascript"></script>
<script src="<%=basePath%>amchart/gauge.js" type="text/javascript"></script> <div id="chartdiv4" style="width:240px; height:200px; margin-left:-70px"></div>
//创建chart公用函数
function fnChart(num0,num1,num2,num3,num4,num5,num6){
// 创建仪表盘对象
var chart;
var arrow;
var axis;
chart = new AmCharts.AmAngularGauge();
chart.marginTop="0";
chart.addTitle(num0);//参数0(仪表盘名称)
chart.backgroundColor="#dddddd";
// 仪表盘的取值范围
var band1 = new AmCharts.GaugeBand();
band1.startValue = 0;
band1.alpha= "10";
band1.endValue = num1;//参数1(刻度范围)
band1.color = num2;//参数2(刻度范围)
band1.innerRadius = "80%";
var band2 = new AmCharts.GaugeBand();
band2.startValue = num3;//参数3(刻度范围)
band2.endValue = 100;
band2.innerRadius = "80%";
band2.color = num4;//参数4(仪表盘的颜色)
//
axis = new AmCharts.GaugeAxis();
axis.bands = [band1, band2];
axis.startValue = 0;
axis.axisThickness = 1;
axis.axisThickness = 7;//盘边灰色的厚度
axis.bottomTextYOffset = 40;
axis.endValue = 100;
axis.valueInterval =10;
axis.axisColor="#dddddd";
axis.bottomTextColor="red";//底部显示数据的字体的颜色
axis.bottomTextYOffset = 15;//设置圆盘的扩张度(-20.-40等)
chart.addAxis(axis);//将axis添加到chart上
// 设置指针
arrow = new AmCharts.GaugeArrow();
arrow.borderAlpha = 1;
//设置默认指针位置
arrow.setValue(Base.getValue(num5));//参数5(表盘底部值)
chart.addArrow(arrow);//给chart添加指针
chart.write(num6); //参数6(div的id)
}

效果如下:

amcharts简单demo(仪表盘)的更多相关文章

  1. 设计模式之单例模式的简单demo

    /* * 设计模式之单例模式的简单demo */ class Single { /* * 创建一个本类对象. * 和get/set方法思想一样,类不能直接调用对象 * 所以用private限制权限 * ...

  2. Spring的简单demo

    ---------------------------------------- 开发一个Spring的简单Demo,具体的步骤如下: 1.构造一个maven项目 2.在maven项目的pom.xml ...

  3. 使用Spring缓存的简单Demo

    使用Spring缓存的简单Demo 1. 首先创建Maven工程,在Pom中配置 <dependency> <groupId>org.springframework</g ...

  4. Managed DirectX中的DirectShow应用(简单Demo及源码)

    阅读目录 介绍 准备工作 环境搭建 简单Demo 显示效果 其他 Demo下载 介绍 DirectX是Microsoft开发的基于Windows平台的一组API,它是为高速的实时动画渲染.交互式音乐和 ...

  5. angular实现了一个简单demo,angular-weibo-favorites

    前面必须说一段 帮客户做了一个过渡期的项目,唯一的要求就是速度,我只是会点儿基础的php,于是就用tp帮客户做了这个项目.最近和客户架构沟通,后期想把项目重新做一下,就用现在最流行的技术,暂时想的使用 ...

  6. Solr配置与简单Demo[转]

    Solr配置与简单Demo 简介: solr是基于Lucene Java搜索库的企业级全文搜索引擎,目前是apache的一个项目.它的官方网址在http://lucene.apache.org/sol ...

  7. 二维码简单Demo

    二维码简单Demo 一.视图 @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name=&qu ...

  8. android JNI 简单demo(2)它JNI demo 写

    android JNI 简单demo(2)它JNI demo 写 一.搭建Cygwin 环境:http://blog.csdn.net/androidolblog/article/details/25 ...

  9. Ext简单demo示例

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

随机推荐

  1. models中,对于(Small)IntegerField类型字段的choices参数在前端的展示

    # models.py class UserInfo(models.Model): gender_choices = ( (1, "男"), (2, "女"), ...

  2. Django cookie、session使用

    一.cookie Cookie是key-value结构,类似于一个python中的字典.随着服务器端的响应发送给客户端浏览器.然后客户端浏览器会把Cookie保存起来,当下一次再访问服务器时把Cook ...

  3. css图片居中(水平居中和垂直居中)

    css图片居中(水平居中和垂直居中) css图片居中分css图片水平居中和垂直居中两种情况,有时候还需要图片同时水平垂直居中,下面分几种居中情况分别介绍. css图片水平居中 利用margin: 0 ...

  4. Silverlight之我见——数据批示(1)

    第一次听到这个概念,你是否有点陌生?MSDN上也没有特意的去说明.不要看到这个名词不太熟悉,其实数据批示,玩过C#的人都会非常熟悉,所谓数据批示,其本质就是特性(Attribute),怎么样,现在有点 ...

  5. Django REST framework - 版本控制

    目录 Django REST framework 版本控制 为什么需要版本控制 DRF提供了5种版本控制方案 版本控制系统的使用 全局配置 局部配置 获取版本信息 Django REST framew ...

  6. 【[Offer收割]编程练习赛 14 A】小Hi和小Ho的礼物

    [题目链接]:http://hihocoder.com/problemset/problem/1505 [题意] [题解] 考虑Meet in the middle. 因为两个数的和不是很大; 直接用 ...

  7. 【codeforces 509A】Maximum in Table

    [题目链接]:http://codeforces.com/contest/509/problem/A [题意] 给你一个递推式f[i][j] = f[i-1][j]+f[i][j-1]; 让你求f[i ...

  8. web开发如何使用百度地图API(一)判断点是否在范围内

    准备工作 注册开发者 创建应用 拿到百度地图ak 前端实现方案 引入百度地图API和工具类库 <script type="text/javascript" src=" ...

  9. Mysql双主自增长冲突处理

    Mysql双主自增长冲突处理   多主互备和主从复制有一些区别,因为多主中都可以对服务器有写权限,所以设计到自增长重复问题   出现的问题(多主自增长ID重复)  1:首先我们通过A,B的test表结 ...

  10. 联赛前集训日记Day2

    考试 倒数第二,我已经废了= = T1 那么水的点转区间都看不出来 T2 裸的线段树生打了个啥都不是的分块 T3 枚举想骗spj的部分分,结果啥都没有 GG 刷题 改题改的也是心累,现在蒙的要死 生活 ...