1、设置AngularGauge图的数据源

AngularGauge.xml：

<?xml version="1.0" encoding="UTF-8"?>
<chart lowerLimit="0" upperLimit="100" lowerLimitDisplay="差" upperLimitDisplay="好"
       numberSuffix="%" showValue="1" baseFontSize="16" showBorder="1">
  <colorRange>
    <color minValue="0" maxValue="60" code="FF0000"/>
    <color minValue="60" maxValue="70" code="00FF00"/>
    <color minValue="70" maxValue="80" code="0000FF"/>
    <color minValue="80" maxValue="90" code="FF654F"/>
    <color minValue="90" maxValue="100" code="8BBA00"/>
  </colorRange>
  <dials>
    <dial value="60"/>
  </dials>
</chart>

2、JSP页面

AngularGauge.jsp：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>FusionWidgets AngularGauge图</title>
<script type="text/javascript" src="../Chart/JS/jquery-2.1.0.js"></script>
<script type="text/javascript" src="../Chart/JS/FusionCharts.js"></script>
<script type="text/javascript">
    $(function(){
    	var angularGauge = new FusionCharts( "../Chart/SWF/AngularGauge.swf", "angularGaugeId", "100%", "580", "0"     );
    	angularGauge.setXMLUrl("xml/AngularGauge.xml");
    	angularGauge.render("angularGaugeDiv");
    });
</script>
</head>
<body>
   <div id="angularGaugeDiv"></div>
</body>
</html>

3、设计结果

FusionWidgets之AngularGauge图的更多相关文章

  1. FusionWidgets DrawingPad图

    1.数据源 DrawingPad.xml: <?xml version="1.0" encoding="UTF-8"?> <chart bgC ...

  2. FusionWidgets Cylinder图

    1.数据源 Cylinder.xml: <?xml version="1.0" encoding="UTF-8"?> <chart palet ...

  3. FusionWidgets Bulb图

    1.数据源提供 Bulb.xml: <?xml version="1.0" encoding="UTF-8"?> <chart lowerLi ...

  4. FusionCharts制作实时刷新图

    转自:http://yklovejava-163-com.iteye.com/blog/1889949 下面介绍的是用FusionCharts制作实时刷新图的过程(FusionCharts确实太好用了 ...

  5. PHP-生成缩略图和添加水印图-学习笔记

    1.开始 在网站上传图片过程,经常用到缩略图功能.这里我自己写了一个图片处理的Image类,能生成缩略图,并且可以添加水印图. 2.如何生成缩略图 生成缩略图,关键的是如何计算缩放比率. 这里,我根据 ...

  6. 火焰图分析openresty性能瓶颈

    注:本文操作基于CentOS 系统 准备工作 用wget从https://sourceware.org/systemtap/ftp/releases/下载最新版的systemtap.tar.gz压缩包 ...

  7. 一起来玩echarts系列（一）------箱线图的分析与绘制

    一.箱线图 Box-plot 箱线图一般被用作显示数据分散情况.具体是计算一组数据的中位数.25%分位数.75%分位数.上边界.下边界,来将数据从大到小排列,直观展示数据整体的分布情况. 大部分正常数 ...

  8. iOS开发系列--打造自己的“美图秀秀”

    --绘图与滤镜全面解析 概述 在iOS中可以很容易的开发出绚丽的界面效果,一方面得益于成功系统的设计,另一方面得益于它强大的开发框架.今天我们将围绕iOS中两大图形.图像绘图框架进行介绍:Quartz ...

  9. Webstorm+Webpack+echarts构建个性化定制的数据可视化图表&&两个echarts详细教程（柱状图，南丁格尔图）

    Webstorm+Webpack+echarts   ECharts 特性介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(I ...

随机推荐

  1. PHP使用file_get_contents或curl请求https的域名内容为空或Http 505错误的问题排查方法

    前段日子,突然接到用户的反馈,说系统中原来的QQ登录.微博登录通通都不能用,跟踪代码进去后发现,是在 file_get_contents这个函数请求QQ登录的地方报错,在用该函数file_get_co ...

  2. WPF之ViewModel

    写之前我先唠叨两句,现在公司要求用wpf写个客户端,我之前玩过winform,没怎么用wpf写过正经项目,我接手这个wpf项目之后就开始研究这个东西,MVVM,自定义控件,等等.可能是winfrom先 ...

  3. pip相关工具使用小结

    最近写taffy的时候用到了两个pip相关的小工具. 一个是pip-review批量更新lib库,一个是pipreqs生成基于项目的requirements.txt. 1. pip相关命令 #更新单个 ...

  4. Android util.Log 工具类

    Android中的日志工具类是Log(android.util.Log),这个类中提供了如下5个方法来供我们打印日志. Log.v().用于打印那些最为琐碎的.意义最小的日志信息.对应级别verbos ...

  5. JAVA设计模式---装饰者模式

    写在前面的话: 该模式动态的将责任附加到对象上,若要扩展功能,装饰者提供了比继承更有弹性的替代方案.装饰者可以在被装饰者的行为前面与/或后面加上自己的行为,甚至将被装饰者的行为整个取代掉,而达到特定的 ...

  6. chromedriver禁用图片，禁用js，切换UA

    selenium 模拟chrome浏览器,此时就是一个真实的浏览器,一个浏览器该加载的该渲染的它都加载都渲染,所以爬取网页的速度很慢.如果可以不加载图片等操作,网页加载速度就会快不少,代码中列出了了禁 ...

  7. 对把JDK源码的一些注解，笔记

    //对treeMap的红黑树理解注解. 2017.02.16 by 何锦彬 JDK,1.7.51 /** From CLR */ private void fixAfterInsertion(Entr ...

  8. git stash暂存文件

    git stash 可用来暂存当前正在进行的工作, 比如想pull 最新代码,但又不想提交代码.先git stash暂存,pull之后,用git stash pop或者git stash apply取 ...

  9. BZOJ 2653: middle [主席树 中位数]

    传送门 题意: 一个长度为n的序列a,设其排过序之后为b,其中位数定义为b[n/2],其中a,b从0开始标号,除法取下整.给你一个 长度为n的序列s.回答Q个这样的询问:s的左端点在[a,b]之间,右 ...

  10. BZOJ 4566: [Haoi2016]找相同字符 [后缀自动机]

    4566: [Haoi2016]找相同字符 Time Limit: 20 Sec  Memory Limit: 256 MBSubmit: 275  Solved: 155[Submit][Statu ...