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 ...
随机推荐
- BZOJ 1230 Usaco2008 Nov 开关灯
[题意概述] 给出一个01序列,初始时序列全为0,每次有修改操作或询问操作,修改操作要求把L~R区间中的0变成1,1变成0,查询操作要求输出L~R区间的1的个数 [题解] 线段树. 每次区间修改把区间 ...
- 【Codeforces 1106D】Lunar New Year and a Wander
[链接] 我是链接,点我呀:) [题意] 让你遍历n个节点,访问过的节点不操作. 如果是没有访问过的点,那就把它加到序列的末尾. 问你形成的最小字典序的序列是多少. [题解] 显然每次找最小的标号 用 ...
- ReportNG 替换testng过程中遇到的问题
1. Exception in thread "main" java.lang.NoClassDefFoundError: org/apache/commons/collectio ...
- jenkins 构建被中断 脚本却还在执行
JobA + git clean -df 构建被中断 被 XXX 终止 Finished: ABORTED 再次jenkins调用JobA 后台进程中 出现了两个JobA的脚本同时执行,导致一些莫名其 ...
- MySQL的limit用法及优化(转)
常规用法: 用法一: OFFSET ; 比如这个SQL ,limit后面跟的是2条数据,offset后面是从第1条开始读取. 用法二: ,; 而这个SQL,limit后面是从第2条开始读,读取1条信息 ...
- [转]C#操作SQL Server数据库
转自:C#操作SQL Server数据库 1.概述 ado.net提供了丰富的数据库操作,这些操作可以分为三个步骤: 第一,使用SqlConnection对象连接数据库: 第二,建立SqlComman ...
- 使用kotlinc、kotlin、java命令进行kotlin程序运行
使用kotlinc.kotlin.java命令进行kotlin程序运行 学习了:https://www.cnblogs.com/ShaYeBlog/p/7280452.html kotlinc xxx ...
- Eclipse搭建maven开发环境
上一篇学习了maven开发环境的搭建,而且手动编写了一个mavenproject,可是这样子效率非常低下.今天带大家学习在eclipse下搭建maven开发环境. 经常使用的maven命令 mvn c ...
- java常见的面试题
1. super()与this()的差别? super和this的差别: 1)super(參数):调用基类中的某一个构造函数(应该为构造函数中的第一条语句) 2)this(參数):调用本类中还有一种形 ...
- 怎样使用OpenShare部署和运营企业门户
怎样使用OpenShare部署和运营企业门户 这篇Blog是偏向企业内总体门户部署和运营的指南,是偏向总体管理和规划的.并非针对终端用户的OpenShare软件操作手冊,详细的操作能够上优酷看相关视频 ...