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 ...
随机推荐
- 【codeforces 510D】Fox And Jumping
[题目链接]:http://codeforces.com/contest/510/problem/D [题意] 你可以买n种卡片; 每种卡片的花费对应c[i]; 当你拥有了第i种卡片之后; 你可以在任 ...
- Excel 2010/2013/2016在鼠标右键新建xls或xlsx文件后,打开报错“无法打开文件”“文件格式或文件扩展名无效”
近段时间,陆续有两个同事先后出现同样的问题(在Excel多个版本都可能出现),问题描述: 当用鼠标右键在任意文件夹或电脑桌面“新建”→“ Microsoft Excel 工作表”,再用鼠标双击打开这个 ...
- 彻底搞定Android开发中软键盘的常见问题
软键盘显示的原理 软件盘的本质是什么?软键盘其实是一个Dialog. InputMethodService为我们的输入法创建了一个Dialog,并且将该Dialog的Window的某些参 ...
- python正则匹配——中文字符的匹配
# -*- coding:utf-8 -*- import re '''python 3.5版本 正则匹配中文,固定形式:\u4E00-\u9FA5 ''' words = 'study in 山海大 ...
- Sencha Touch 2.1 Chart属性中文解释
图表的几大要素: 1.坐标:上.下.左.右. 坐标的类型,数字.分类... 坐标包含需要显示的坐标值,即绑定的字段 坐标值的样式,比如旋转.字体大小.格式 坐标的最大值.最小值.是否显示网格 坐标旁边 ...
- float在内存中的存放
一个float型实数在内存中占4个字节,即32个二进制bit,从低位到高位依次叫第0位到第31位.这32位可以分为3个部分:符号位(第31位),阶码(第30位到第23位共8位),尾数(最低23位). ...
- 洛谷—— P2015 二叉苹果树
https://www.luogu.org/problem/show?pid=2015 题目描述 有一棵苹果树,如果树枝有分叉,一定是分2叉(就是说没有只有1个儿子的结点) 这棵树共有N个结点(叶子点 ...
- Spring MVC-处理程序映射(Handler Mapping)-控制器类名称处理程序映射(Controller Class Name Handler Mapping)示例(转载实践)
以下内容翻译自:https://www.tutorialspoint.com/springmvc/springmvc_controllerclassnamehandlermapping.htm 说明: ...
- POJ 3653 & ZOJ 2935 & HDU 2722 Here We Go(relians) Again(最短路dijstra)
题目链接: PKU:http://poj.org/problem? id=3653 ZJU:problemId=1934" target="_blank">http ...
- /usr/bin/ld: cannot find -lltdl collect2: ld returned 1 exit status make: *** [sapi/cgi/php-cgi] Err
/usr/bin/ld: cannot find -lltdl collect2: ld returned 1 exit status make: *** [sapi/cgi/php-cgi] Err ...