google js 实现Dashboard

longgangbai

浏览: 7331419 次
性别:
来自: 上海

最近访客更多访客>>

sdcharles

paladin1988

ljq867

yuxiangtong

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

通过Google Chart Tools提供的图表功能实现如下：

地址如下：

http://code.google.com/intl/zh-CN/apis/chart/interactive/docs/gallery/gauge.html

效果如下图：

代码如下：

<html>
<head>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load('visualization', '1', {packages:['gauge']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Label');
data.addColumn('number', 'Value');
data.addRows([
['Memory', 80],
['CPU', 55],
['Network', 68]
]);

var options = {
width: 400, height: 120,
redFrom: 90, redTo: 100,
yellowFrom:75, yellowTo: 90,
minorTicks: 5
};

var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id='chart_div'></div>
</body>
</html>

Loading

The google.load package name is "gauge"

google.load('visualization', '1', {packages: ['gauge']});

The visualization's class name is google.visualization.Gauge

var visualization = new google.visualization.Gauge(container);

Data Format

Each numeric value is displayed as a gauge. Two alternative data formats are supported:

Two columns. The first column should be a string, and contain the gauge label. The second column should be a number, and contain the gauge value.
Any number of numeric columns. The label of each gauge is the column's label.

Configuration Options

Name Type Default Description

animation.duration	number	400	The duration of the animation, in milliseconds. For details, see the animation documentation.
animation.easing	string	'linear'	The easing function applied to the animation. The following options are available: 'linear' - Constant speed. 'in' - Ease in - Start slow and speed up. 'out' - Ease out - Start fast and slow down. 'inAndOut' - Ease in and out - Start slow, speed up, then slow down.
greenColor	string	'#109618'	The color to use for the green section, in HTML color notation.
greenFrom	number	none	The lowest value for a range marked by a green color.
greenTo	number	none	The highest value for a range marked by a green color.
height	number	Container's width	Height of the chart in pixels.
majorTicks	Array of strings	none	Labels for major tick marks. The number of labels define the number of major ticks in all gauges. The default is five major ticks, with the labels of the minimal and maximal gauge value.
max	number	100	The maximal value of a gauge.
min	number	0	The minimal value of a gauge.
minorTicks	number	2	The number of minor tick section in each major tick section.
redColor	string	'#DC3912'	The color to use for the red section, in HTML color notation.
redFrom	number	none	The lowest value for a range marked by a red color.
redTo	number	none	The highest value for a range marked by a red color.
width	number	Container's width	Width of the chart in pixels.
yellowColor	string	'#FF9900'	The color to use for the yellow section, in HTML color notation.
yellowFrom	number	none	The lowest value for a range marked by a yellow color.
yellowTo	number	none	The highest value for a range marked by a yellow color.

Methods

Method Return Type Description

`draw(data, options)`	none	Draws the chart.
`clearChart()`	none	Clears the chart, and releases all of its allocated resources.

Events

No triggered events.

Java 实现DashBoard：

package com.easyway.dashbroad;

import java.awt.Color;
import java.awt.Font;
import java.awt.GradientPaint;
import java.awt.Point;
import java.io.FileOutputStream;
import java.io.IOException;

import org.jfree.chart.ChartUtilities;
import org.jfree.chart.JFreeChart;
import org.jfree.chart.plot.dial.DialBackground;
import org.jfree.chart.plot.dial.DialCap;
import org.jfree.chart.plot.dial.DialPlot;
import org.jfree.chart.plot.dial.DialTextAnnotation;
import org.jfree.chart.plot.dial.DialValueIndicator;
import org.jfree.chart.plot.dial.StandardDialFrame;
import org.jfree.chart.plot.dial.StandardDialRange;
import org.jfree.chart.plot.dial.StandardDialScale;
import org.jfree.data.general.DefaultValueDataset;
import org.jfree.ui.GradientPaintTransformType;
import org.jfree.ui.StandardGradientPaintTransformer;
/**
 * 
 * @Title: 
 * @Description: JFreeChart实现Dashboard功能
 * @Copyright:Copyright (c) 2011
 * @Company:易程科技股份有限公司
 * @Date:2011-4-11
 * @author  longgangbai
 * @version 1.0
 */
public class DashboardApp {

	public String getDial(String warnName,double warnValue) {  
			// 数据集合对象 此处为DefaultValueDataset  
			DefaultValueDataset dataset = new DefaultValueDataset();  
			// 当前指针指向的位置，即：我们需要显示的数据  
			dataset = new DefaultValueDataset(warnValue);  
			// 实例化DialPlot  
			DialPlot dialplot = new DialPlot();  
			dialplot.setView(0.0D, 0.0D, 1.0D, 1.0D);  
			// 设置数据集合  
			dialplot.setDataset(dataset);  
			// 开始设置显示框架结构  
			StandardDialFrame simpledialframe = new StandardDialFrame();  
			simpledialframe.setBackgroundPaint(Color.lightGray);//Color.lightGray //仪表盘边框内部颜色  
			simpledialframe.setForegroundPaint(Color.darkGray);//Color.darkGray //仪表盘边框外部颜色  
			dialplot.setDialFrame(simpledialframe);  
			// 结束设置显示框架结构,表盘颜色 从最上部 白色 过渡到最下部的蓝色  
			GradientPaint gradientpaint = new GradientPaint(new Point(), new Color(229,229,229), new Point(), new Color(229,229,229));  
			DialBackground dialbackground = new DialBackground(gradientpaint);  
			dialbackground.setGradientPaintTransformer(new StandardGradientPaintTransformer(GradientPaintTransformType.VERTICAL));  
			dialplot.setBackground(dialbackground);  
			// 设置显示在表盘中央位置的信息  
			DialTextAnnotation dialtextannotation = new DialTextAnnotation(warnName);  
			dialtextannotation.setFont(new Font("宋体", 1, 16));  
			dialtextannotation.setRadius(0.69999999999999996D);  
			dialplot.addLayer(dialtextannotation);  

		// 设置刻度范围（绿色）  
		if(warnValue==0){  
			StandardDialRange standarddialrange2 = new StandardDialRange(0D, 100D,Color.green);  
			standarddialrange2.setInnerRadius(0.52000000000000002D);  
			standarddialrange2.setOuterRadius(0.55000000000000004D);  
			dialplot.addLayer(standarddialrange2);   
		}else if(warnValue>0&&warnValue<=100){// 设置刻度范围（橘黄色）  
			StandardDialRange standarddialrange1 = new StandardDialRange(0D, 100D,Color.orange);  
			standarddialrange1.setInnerRadius(0.52000000000000002D);  
			standarddialrange1.setOuterRadius(0.55000000000000004D);  
			dialplot.addLayer(standarddialrange1);  
		}else if(warnValue>100&&warnValue<=1000){// 设置刻度范围（红色）   
			StandardDialRange standarddialrange = new StandardDialRange(0D, 1000D,Color.red);  
			standarddialrange.setInnerRadius(0.52000000000000002D);  
			standarddialrange.setOuterRadius(0.55000000000000004D);  
			dialplot.addLayer(standarddialrange);  
		}else if(warnValue>1000){// 设置刻度范围（红色）   
			StandardDialRange standarddialrange = new StandardDialRange(0D, 10000D,Color.red);  
			standarddialrange.setInnerRadius(0.52000000000000002D);  
			standarddialrange.setOuterRadius(0.55000000000000004D);  
			dialplot.addLayer(standarddialrange);  
		}  

		//指针指示框 ,仪表盘中间的小方框  
		DialValueIndicator dialvalueindicator = new DialValueIndicator(0);  
		dialvalueindicator.setFont(new Font("宋体", 1, 14));   
		dialvalueindicator.setOutlinePaint(new Color(229,229,229));  
		dialvalueindicator.setBackgroundPaint(new Color(229,229,229));  
		dialvalueindicator.setRadius(0.39999999999999998D);  
		//dialvalueindicator.setPaint(Color.red);  
		dialplot.addLayer(dialvalueindicator);  
		/*  
		* StandardDialScale 方法  
		* 参数1 开始数值 类似手表 开始 0点  
		* 参数2 结束数值 类似手表 结束 12点  
		* 参数5 间隔差值 类似手表 间隔差值5分钟  
		* 参数6 间隔数量 类似手表 1点到2点 有4个间隔点  
		*/ 
		        //如果 预警条数少于 100条,开度从 0 至 100 ,间隔 10  
		double startPosition=0D; //开度 0  
        double endPosition=100D; //开度 100  
        double skipValue=10D; //间隔 10  
        if(warnValue>100&&warnValue<1000){  
           endPosition=1000D;  
           skipValue=100D;  
        }else if(warnValue>=1000){  
            endPosition=10000D;  
            skipValue=1000D;  
        }  
		//刻度盘设置  
		StandardDialScale standarddialscale = new StandardDialScale(startPosition, endPosition,-120D, -300D, skipValue, 4);  
		standarddialscale.setTickRadius(0.88D);//设置半径  
		standarddialscale.setTickLabelOffset(0.14999999999999999D);  
		standarddialscale.setTickLabelFont(new Font("Dialog", 0, 10));//刻度盘数字大小  

		// 注意是 dialplot.addScale（）不是dialplot.addLayer（）  
		dialplot.addScale(0, standarddialscale);  

		// 设置指针  
		org.jfree.chart.plot.dial.DialPointer.Pointer pointer = new org.jfree.chart.plot.dial.DialPointer.Pointer();  
		dialplot.addLayer(pointer);  
		// 实例化DialCap  
		DialCap dialcap = new DialCap();  
		dialcap.setRadius(0.10000000000000001D);  
		dialplot.setCap(dialcap);  
		// 生成chart对象  
		JFreeChart jfreechart = new JFreeChart(dialplot);  
		// 3、设定参数输出结果,首先在 项目/WEB-INF/classes/,添加WarnImages文件夹  
		String filePath="D:/"+System.currentTimeMillis()+".jpeg";//动态文件名 相对  
		FileOutputStream file = null;  
		try {  
		file = new FileOutputStream(filePath);  
		ChartUtilities.writeChartAsJPEG(file, 1.0f, jfreechart, 200, 200,null);//200,200 图片大小  
		} catch (IOException e) {  
		e.printStackTrace();  
		} // 生成图片  
		finally {  
		try {  
		file.close();// 最后关闭文件流  
		} catch (IOException e) {  
		e.printStackTrace();  
		}  
		}  
		return filePath;
		}  
		public static void main(String[] args) {  
		  System.out.println(new DashboardApp().getDial("测试预警",80.0));  
		}
}

分享到：

2012-03-05 10:31
浏览 2179
评论(0)
分类:编程语言
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论