最近项目中展示数据有用到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. Emacs的undo与redo

    在Emacs的手册16.1节中有这样一句话, Any command other than an undo command breaks the sequence of undo commands. ...

  2. paste deploy初探

    这段时间刚着手开始研究Openstack Swift源码,为后续开发做准备. Swift依据python WSGI规范.WSGI(Web Server Gateway Interface)是Pytho ...

  3. 20180703mysql运维专题一:利用etl监控mysql日志

    参考地址: https://www.elastic.co/solutions/logging https://www.elastic.co/guide/en/beats/filebeat/curren ...

  4. nyoj_42_一笔画问题_201403181935

    一笔画问题 时间限制:3000 ms  |  内存限制:65535 KB 难度:4   描述 zyc从小就比较喜欢玩一些小游戏,其中就包括画一笔画,他想请你帮他写一个程序,判断一个图是否能够用一笔画下 ...

  5. Xmemcached使用之与Spring整合

    转自:http://hi.baidu.com/tjbaso/item/22f3c32b062ebefb50fd87b8 1 简介Xmemcached是一个高性能的基于java nio的memcache ...

  6. [Cypress] Create a Single Custom Cypress Command from Multiple Commands

    Cypress provides a straightforward API that allows you to define custom commands. In this lesson, we ...

  7. Javaproject集成log4J 1.x

    log4j是Java开发平台中的日志管理工具,是Apache基金会的一个开源项目.它的作用能够简单的理解为在开发过程中替代system.out的功能. 1.在project中集成log4j: (1)在 ...

  8. Android push推送消息到达成功率优化

    Android push推送消息到达成功率优化 问题:server向client发送消息.未考虑client是否在线,这种消息到达率是非常低的. 第一次优化:使用server离线缓存数据,推断假设cl ...

  9. HDU 3718 Similarity(KM最大匹配)

    HDU 3718 Similarity 题目链接 题意:给定一个标准答案字符串,然后以下每一行给一个串.要求把字符一种相应一种,要求匹配尽量多 思路:显然的KM最大匹配问题,位置相应的字符连边权值+1 ...

  10. 加密学教程(Cryptography Tuturials)文件夹

    加密学教程(Cryptography Tuturials) 太阳火神的漂亮人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途-保持一致&quo ...