前端图表系列之一 --Highchart

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

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

?

1 2	<span style= "text-decoration: line-through;" >$(selector).method(); </span>

   而是采用new关键字

?

1	var chart= new class(options);

   先看一个基本的示例

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62

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：

?

1	[{},{},{}]

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

配置选项

chart：

renderTo//放置图表的容器

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

xAxis,yAxis:

tickInterval: 15//自定义刻度

更多

常见的使用环境

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

?

1 2 3 4 5 6

var options={ chart:{}, xAxis:{}, yAxis:{}, series:[] }

因为大部分的配置属性都是重复的，我们没有必要每次都声明。所以首先声明一个通用的options，然后采用$.extend函数

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

?

1	var o=$.exend({},options,{chart:{},xAxis:{}})

这样o是options与第三个对象合并后的对象

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62

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选项的颜色配置，按显示顺序配置即可！主题显示效果

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75

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

应用主题

?

1	Highcharts.setOptions(theme);

4：饼形图的计算

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