(jQuery,Highcharts)前端图表系列之一 --Highcharts
时间：2010-10-11 来源：前端开发（想念ling）
做为系统开发应用不可缺少的部分，图表可以使系统分析看起来更直观，也可以使系统可以锦上添花，毕竟做统计比较繁琐~使用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: 基本的图形报表参见官方示例
相关阅读 更多 +
