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. ABP官方文档翻译 3.5 规约

    规约 介绍 示例 创建规范类 使用仓储规约 组合规约 讨论 什么时候使用? 什么时候不使用? 介绍 规约模式是一种特别的软件设计模式,通过使用布尔逻辑将业务规则链接起来重新调配业务规则.(维基百科). ...

  2. 使用mongoose和bcrypt实现用户密码加密

    前面的话 最近在做的个人项目中,需要对密码进行加密保存,对该操作的详细步骤记录如下 介绍 关于mongoose已经写过博客就不再赘述,下面主要介绍bcrypt bcrypt是一个由两个外国人根据Blo ...

  3. BZOJ 2006: [NOI2010]超级钢琴 [ST表+堆 | 主席树]

    题意: 一个序列,求k个不相同的长度属于\([L,R]\)的区间使得和最大 前缀和,对于每个r找最小的a[l] 然后我yy了一个可持久化线段树做法...也许会T 实际上主席树就可以了,区间k小值 然后 ...

  4. python学习：Dmidecode系统信息（一）

    #!/usr/bin/env python   from subprocess import Popen, PIPE   p = Popen(['dmidecode'], stdout=PIPE) d ...

  5. href与src 区别

    src 是可替换的文本支撑,将指向的内容引入文档当前标签所在的位置, 当浏览器解析到该标签时,将暂停其它资源的下载处理, 请求该标签的src ,下载指向的外部资源并应用到当前文档, 所以js 脚本一般 ...

  6. 区间DP的四边形不等式优化

    今天上课讲DP,所以我学习了四边形不等式优化(逃 首先我先写出满足四边形不等式优化的方程:

  7. 【数据结构】——搜索二叉树的插入，查找和删除（递归&非递归）

    一.搜索二叉树的插入,查找,删除 简单说说搜索二叉树概念: 二叉搜索树又称二叉排序树,它或者是一棵空树,或者是具有以下性质的二叉树 若它的左子树不为空,则左子树上所有节点的值都小于根节点的值 若它的右 ...

  8. HashMap原理阅读

    前言 还是需要从头阅读下HashMap的源码.目标在于更好的理解HashMap的用法,学习更精炼的编码规范,以及应对面试. 它根据键的hashCode值存储数据,大多数情况下可以直接定位到它的值,因而 ...

  9. 业余草分享 Spring Boot 2.0 正式发布的新特性

    就在昨天Spring Boot2.0.0.RELEASE正式发布,今天早上在发布Spring Boot2.0的时候还出现一个小插曲,将Spring Boot2.0同步到Maven仓库的时候出现了错误, ...

  10. windows转mac-开发环境搭建（一）：需要搭建的环境及安装的工具

    作为一个java后端开发者来说,随着项目的增加,前段时间用windows真是受尽折磨,电脑卡到不行,在我们开发部技术大佬的一再安利之下,狠下心选了个17年13寸带touch bar的MacBook P ...