???? 通過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));
}
}
?
google js 實現Dashboard