通过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"
The visualization's class name is
google.visualization.Gauge
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:
|
| 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));
}
}
