???? 通過Google Chart Tools提供的圖表功能實現(xiàn)如下：
? 地址如下：
?
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 實現(xiàn)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實現(xiàn)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) {
// 數(shù)據(jù)集合對象 此處為DefaultValueDataset
DefaultValueDataset dataset = new DefaultValueDataset();
// 當(dāng)前指針指向的位置，即：我們需要顯示的數(shù)據(jù)
dataset = new DefaultValueDataset(warnValue);
// 實例化DialPlot
DialPlot dialplot = new DialPlot();
dialplot.setView(0.0D, 0.0D, 1.0D, 1.0D);
// 設(shè)置數(shù)據(jù)集合
dialplot.setDataset(dataset);
// 開始設(shè)置顯示框架結(jié)構(gòu)
StandardDialFrame simpledialframe = new StandardDialFrame();
simpledialframe.setBackgroundPaint(Color.lightGray);//Color.lightGray //儀表盤邊框內(nèi)部顏色
simpledialframe.setForegroundPaint(Color.darkGray);//Color.darkGray //儀表盤邊框外部顏色
dialplot.setDialFrame(simpledialframe);
// 結(jié)束設(shè)置顯示框架結(jié)構(gòu),表盤顏色 從最上部 白色 過渡到最下部的藍色
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);
// 設(shè)置顯示在表盤中央位置的信息
DialTextAnnotation dialtextannotation = new DialTextAnnotation(warnName);
dialtextannotation.setFont(new Font("宋體", 1, 16));
dialtextannotation.setRadius(0.69999999999999996D);
dialplot.addLayer(dialtextannotation);
// 設(shè)置刻度范圍（綠色）
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){// 設(shè)置刻度范圍（橘黃色）
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){// 設(shè)置刻度范圍（紅色）
StandardDialRange standarddialrange = new StandardDialRange(0D, 1000D,Color.red);
standarddialrange.setInnerRadius(0.52000000000000002D);
standarddialrange.setOuterRadius(0.55000000000000004D);
dialplot.addLayer(standarddialrange);
}else if(warnValue>1000){// 設(shè)置刻度范圍（紅色）
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 方法
* 參數(shù)1 開始數(shù)值 類似手表 開始 0點
* 參數(shù)2 結(jié)束數(shù)值 類似手表 結(jié)束 12點
* 參數(shù)5 間隔差值 類似手表 間隔差值5分鐘
* 參數(shù)6 間隔數(shù)量 類似手表 1點到2點 有4個間隔點
*/
//如果 預(yù)警條數(shù)少于 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;
}
//刻度盤設(shè)置
StandardDialScale standarddialscale = new StandardDialScale(startPosition, endPosition,-120D, -300D, skipValue, 4);
standarddialscale.setTickRadius(0.88D);//設(shè)置半徑
standarddialscale.setTickLabelOffset(0.14999999999999999D);
standarddialscale.setTickLabelFont(new Font("Dialog", 0, 10));//刻度盤數(shù)字大小
// 注意是 dialplot.addScale（）不是dialplot.addLayer（）
dialplot.addScale(0, standarddialscale);
// 設(shè)置指針
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、設(shè)定參數(shù)輸出結(jié)果,首先在 項目/WEB-INF/classes/,添加WarnImages文件夾
String filePath="D:/"+System.currentTimeMillis()+".jpeg";//動態(tài)文件名 相對
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();// 最后關(guān)閉文件流
} catch (IOException e) {
e.printStackTrace();
}
}
return filePath;
}
public static void main(String[] args) {
System.out.println(new DashboardApp().getDial("測試預(yù)警",80.0));
}
}
?
google js 實現(xiàn)Dashboard