(jQuery,Highcharts)前端图表系列之一 --Highcharts

   做为系统开发应用不可缺少的部分,图表可以使系统分析看起来更直观,也可以使系统可以锦上添花,毕竟做统计比较繁琐~使用java的程序员,通常使用jfreechart这个工具去作图,唯一的缺憾是图是静态的jpg,缺乏灵性~其实前台有很多这样的图形控件可以使用。这是个一系列的随笔将介绍几乎所有的前台图形报表的使用。本篇是开篇;

   HighCharts是jQuery的一个插件,当前它并不像其他的jQuery插件那样可以像这样调用

 

 $(selector).method();

 

 

   而是采用new关键字

 

   var chart= new class(options);

   先看一个基本的示例

 

var chart;
			$(document).ready(function() {
				chart = new Highcharts.Chart({
					chart: {
						renderTo: 'container',
						defaultSeriesType: 'line',
						marginRight: 130,
						marginBottom: 25
					},
					title: {
						text: 'Monthly Average Temperature',
						x: -20 //center
					},
					subtitle: {
						text: 'Source: WorldClimate.com',
						x: -20
					},
					xAxis: {
						categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 
							'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
					},
					yAxis: {
						title: {
							text: 'Temperature (°C)'
						},
						plotLines: [{
							value: 0,
							width: 1,
							color: '#808080'
						}]
					},
					tooltip: {
						formatter: function() {
				                return '<b>'+ this.series.name +'</b><br/>'+
								this.x +': '+ this.y +'°C';
						}
					},
					legend: {
						layout: 'vertical',
						align: 'right',
						verticalAlign: 'top',
						x: -10,
						y: 100,
						borderWidth: 0
					},
					series: [{
						name: 'Tokyo',
						data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
					}, {
						name: 'New York',
						data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
					}, {
						name: 'Berlin',
						data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
					}, {
						name: 'London',
						data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
					}]
				});
				
				
			});

整个配置的关键部分在于series,chart,xAxis,yAxis;

series接受的数据格式为json Array:

[{},{},{}]
注意:最后一个数据后面一定不能有逗号,否则在IE系列下会报错,这个在几乎所有的jQuery插件的配置中也会出现的问题,当IE报错的时候,一定要检查是否多写了一个逗号

配置选项

chart:

renderTo//放置图表的容器

defaultSeriesType//图表类型line, spline, area, areaspline, column, bar, pie , scatter

xAxis,yAxis:

tickInterval: 15//自定义刻度

更多

常见的使用环境

1:我想显示多个图形报表。这些数据不是循环生成的!因为如果循环生成的话直接$.each就可以了!

var options={
     chart:{},
     xAxis:{},
     yAxis:{},
     series:[]
}
因为大部分的配置属性都是重复的,我们没有必要每次都声明。所以首先声明一个通用的options,然后采用$.extend函数

注意,我们不希望更改原有的options对象,所以

var o=$.exend({},options,{chart:{},xAxis:{}})
这样o是options与第三个对象合并后的对象

var options={
			chart:{
				x:1,
				y:2
			},
			data:{
				m:1,
				n:2
			}
		}
var o=$.extend(
          {},options,
         {chart:{
		x:2},ss:{
			u:2,
			f:2
		}})
var o2=$.extend({},options,{data:{}})
//console.log(o);

var chart=new Highcharts.Chart(o);
var chart2=new Highcharts.Chart(o2);

2: 从服务器获取数据动态生成运行曲线

曲线是从服务器获取的点连接而成。我们将点输出到报表上,连接就可以组成动态曲线。

使用的方法

配置chart:{

events:{

   load:requestData

  }

} ,

series: [{ name: '服务器数据', data: [] }]

方法:

chart.series[0].addPoint([x,y], true, shift);

 

var x=-10;
$(document).ready(function(){
	chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            defaultSeriesType: 'spline',
            events: {
                load: requestData
            }
        },
		tooltip:{
			formatter: function() {
	           return ''+ this.series.name +'<br/>'+
				'时间 : '+ this.x +'<br/>'+
				'价格: '+ this.y;
             }
		},
        title: {
            text: '运行曲线'
        },
        xAxis: {
            //type: 'linear',
            //tickPixelInterval: 10,
            maxZoom: 60*3,
			min:0,
			minPadding:0.2
        },
        yAxis: {
            minPadding: 0.2,
            maxPadding: 0.2,
            title: {
                text: 'Value',
                margin: 80
            }
        },
        series: [{
            name: '服务器数据',
            data: []
        }//,{
			//name:"fuww",
			//data:[]
		//}
		]
    });
function requestData() {
    $.ajax({
        url: 'orderAuction.action',
        success: function(point) {
            var series = chart.series[0],
            shift = series.data.length > 20;
			var s=eval('('+point+')');
            var y=s.initial.price;
			var z=s.initial.change;
            chart.series[0].addPoint([x,y], true, shift);
            // call it again after one second
           timett = setTimeout('requestData()', 1000);
		   //timett = setInterval(requestData,1000);
        },
        cache: false
    });
	x=x+10;
}
3:定义主题

最重要的是colors选项的颜色配置,按显示顺序配置即可!主题显示效果

 

var theme = {
    colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'],
    title: {
        style: {
            color: '#000',
            font: 'bold 16px "Trebuchet MS", Verdana, sans-serif'
        }
    },
    subtitle: {
        style: {
            color: '#666666',
            font: 'bold 12px "Trebuchet MS", Verdana, sans-serif'
        }
    },
    xAxis: {
        gridLineWidth: 1,
        lineColor: '#000',
        tickColor: '#000',
        labels: {
            style: {
                color: '#000',
                font: '11px Trebuchet MS, Verdana, sans-serif'
            }
        },
        title: {
            style: {
                color: '#333',
                fontWeight: 'bold',
                fontSize: '12px',
                fontFamily: 'Trebuchet MS, Verdana, sans-serif'
            
            }
        }
    },
    yAxis: {
        alternateGridColor: null,
        minorTickInterval: 'auto',
        lineColor: '#000',
        lineWidth: 1,
        tickWidth: 1,
        tickColor: '#000',
        labels: {
            style: {
                color: '#000',
                font: '11px Trebuchet MS, Verdana, sans-serif'
            }
        },
        title: {
            style: {
                color: '#333',
                fontWeight: 'bold',
                fontSize: '12px',
                fontFamily: 'Trebuchet MS, Verdana, sans-serif'
            }
        }
    },
    legend: {
        itemStyle: {
            font: '9pt Trebuchet MS, Verdana, sans-serif',
            color: 'black'
        
        },
        itemHoverStyle: {
            color: '#039'
        },
        itemHiddenStyle: {
            color: 'gray'
        }
    },
    labels: {
        style: {
            color: '#99b'
        }
    }
};
应用主题

Highcharts.setOptions(theme);
4:饼形图的计算

饼形图是按照百分比去生成的,不论是后台计算还是前台计算,我们需要将其百分比的总和为100%,所以为了不那么错误的计算,应该使用四舍五入的形式,最后一个数据=100-前面总和。

5: 基本的图形报表参见官方示例

posted @ 2010-10-11 11:47 FED@Web 阅读(...) 评论(...) 编辑 收藏