zoukankan      html  css  js  c++  java
  • FusionWidgets之AngularGauge图

    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、设计结果




  • 相关阅读:
    【转】使用python编写网络通信程序
    【转】linux下的单线程
    【转】使用python进行多线程编程
    mysql数据库安装、启动及权限设置
    【转】Linux下的多线程编程背景知识
    开关电源使用
    ubi实际使用
    xshell快捷键
    Nandflash镜像尾部不应填充0xFF
    CRC校验
  • 原文地址:https://www.cnblogs.com/hzcya1995/p/13315329.html
Copyright © 2011-2022 走看看