`
longgangbai
  • 浏览: 7257046 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

google js 实现Dashboard

 
阅读更多

     通过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: 


    

  1. 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. 
    2. 

  2. Any number of numeric columns. The label of each gauge is the column's label. 
    3. 




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));  
		}
}





 


  


  

    
    
分享到：
      
      
    

  


  

    

      
      |
      Mongo的ORM框架的学习Morphia(七)@Embedd ...
    

  

  

        
  

    
  

    
评论

    
    
    
    
  


  

    
发表评论

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

      

  

  





  

    
相关推荐

    
    
  





  
    Magicbox
  













      

            
    

    
    
  

  



   Global site tag (gtag.js) - Google Analytics