amcharts简单demo(仪表盘)
最近项目中展示数据有用到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(仪表盘)的更多相关文章
- 设计模式之单例模式的简单demo
/* * 设计模式之单例模式的简单demo */ class Single { /* * 创建一个本类对象. * 和get/set方法思想一样,类不能直接调用对象 * 所以用private限制权限 * ...
- Spring的简单demo
---------------------------------------- 开发一个Spring的简单Demo,具体的步骤如下: 1.构造一个maven项目 2.在maven项目的pom.xml ...
- 使用Spring缓存的简单Demo
使用Spring缓存的简单Demo 1. 首先创建Maven工程,在Pom中配置 <dependency> <groupId>org.springframework</g ...
- Managed DirectX中的DirectShow应用(简单Demo及源码)
阅读目录 介绍 准备工作 环境搭建 简单Demo 显示效果 其他 Demo下载 介绍 DirectX是Microsoft开发的基于Windows平台的一组API,它是为高速的实时动画渲染.交互式音乐和 ...
- angular实现了一个简单demo,angular-weibo-favorites
前面必须说一段 帮客户做了一个过渡期的项目,唯一的要求就是速度,我只是会点儿基础的php,于是就用tp帮客户做了这个项目.最近和客户架构沟通,后期想把项目重新做一下,就用现在最流行的技术,暂时想的使用 ...
- Solr配置与简单Demo[转]
Solr配置与简单Demo 简介: solr是基于Lucene Java搜索库的企业级全文搜索引擎,目前是apache的一个项目.它的官方网址在http://lucene.apache.org/sol ...
- 二维码简单Demo
二维码简单Demo 一.视图 @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name=&qu ...
- android JNI 简单demo(2)它JNI demo 写
android JNI 简单demo(2)它JNI demo 写 一.搭建Cygwin 环境:http://blog.csdn.net/androidolblog/article/details/25 ...
- Ext简单demo示例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...
随机推荐
- django访问静态变量的设置
在项目的urls.py文件中 默认urlpatterns是空的列表需要填入url匹配的路由,默认使用static from django.conf.urls import include, url f ...
- bytes类型和python中编码的转换方法
一.bytes类型 bytes类型是指一堆字节的集合,在python中以b开头的字符串都是bytes类型.例如: >>> a = "中国" >>> ...
- 第十五节:pandas之concat()级联
Pandas 提供了concat()函数可以轻松的将Series.DataFrame对象进行合并在一起. pandas.concat(obj , axis=0 , join="inner&q ...
- pip操作以及window和虚拟机中为pip更换一个国内的镜像源的方法
前言 在学习PyQt5的过程中,参考王硕和孙洋洋的PyQt5快速开发与实战中,看到的关于Python开发技巧与实战,觉得挺好的 所以将其摘抄了下来方便阅读.之后还有一个关于更换pip镜像源的方法,方便 ...
- bzoj 5355 kdtree 树链剖分
https://www.lydsy.com/JudgeOnline/problem.php?id=5355 想在b站搜query on a tree系列不小心看到了这题 扑鼻而来的浓浓的OI风格的题面 ...
- Leetcode 49.字母异位词分组
字母异位词分组 给定一个字符串数组,将字母异位词组合在一起.字母异位词指字母相同,但排列不同的字符串. 示例: 输入: ["eat", "tea", " ...
- Oracle数据库导出导入
需求为将数据库A中的数据导出为*.dmp文件.然后将*.dmp文件导入到数据库B. 1.导出数据库A 在cmd窗体输入下面命令: 导出所有数据库 exp username/password@数 ...
- CSDN挑战编程——《绝对值最小》
绝对值最小 题目详情: 给你一个数组A[n],请你计算出ans=min(|A[i]+A[j]|)(0<=i,j<n). 比如:A={1, 4, -3}, 则: |A[0] + A[0]| ...
- HDU 5532 / 2015ACM/ICPC亚洲区长春站 F.Almost Sorted Array
Almost Sorted Array Problem Description We are all familiar with sorting algorithms: quick sort, mer ...
- luogu3225 [HNOI2012]矿场搭建
题目大意 给出一个有$n(n\leq 500)$个节点的无向图,一个满足条件的点集$V$会使得对于图中的每一个节点$u$,满足路径起点为$u$终点$v\in V$的路径集合$P_u$中总存在至少两条路 ...