Highcharts使用说明

Highcharts使用说明1概述Highcharts是一个跨浏览器的JavaScript图表控件，支持柱状图、趋势图、面积图、饼图、环形图、组合图、堆积图、散点图。Highcharts图表的基本功能，只需要引入两个JS类库即可，一个是jquery类库，另外一个就是它本身的类库。但是如果需要支持主题和导出图表功能，就需要引入其它相应的JS类库。官方网站网址：参考手册网址：示例网址：使用2.1概述第一步，引入js库。引入最少js库代码如下所示。scripttype=text/javascriptsrc=../js/jquery.min.js/scriptscripttype=text/javascriptsrc=../js/highcharts.js/script第二步，在页面中创建图表容器。示例代码如下所示。divid=containerstyle=min-width:400px;height:400px;margin:0auto/div第三步，创建图表js对象。2.2图表构造参数常用属性1chart1.1renderTo：图表的页面显示容器的ID1.2defaultSeriesType：图表的显示类型（line,spline,scatter,splineareabar,pie,area,column）1.3margin：上下左右空隙1.4events：事件1.4.1click：function(e){}1.4.2load：function(e){}2xAxis/yAxis2.1gridLineColor：网格颜色2.2reversed：是否反向true,false2.3gridLineWidth：网格粗细2.4startOnTick：是否从坐标线开始画图区域2.5endOnTick：是否从坐标线结束画图区域2.6tickmarkPlacement：坐标值与坐标线标记的对齐方式on,between2.7tickPosition：坐标线标记的样式向内延伸还是向外延伸(insidel,outside)2.8tickPixelInterval：决定着横坐标的密度2.9tickColor：坐标线标记的颜色2.10tickWidth：坐标线标记的宽度2.11lineColor：基线颜色2.12lineWidth：基线宽度2.13max：固定坐标最大值2.14min：固定坐标最小值2.15plotlines：标线属性2.16title2.16.1enabled：是否显示2.16.2text：坐标名称2.17Labels：坐标轴值显示类2.17.1formatter：格式化函数2.17.2enabled：是否显示坐标轴的坐标值2.17.3rotation：倾斜角度2.17.4align：与坐标线的水平相对位置2.17.5x：水平偏移量2.17.6y：垂直偏移量2.17.7style2.17.7.1font：字体样式2.17.7.2color：颜色3Tooltip：数据点的提示框3.1enabled：鼠标经过时是否可动态呈现true,false3.2formatter：格式化提示框的内容样式4plotOptions：画各种图表的数据点的设置4.1Area类4.1.1lineWidth：线宽度4.1.2fillColor：area的填充颜色组4.1.3marker{}：设置动态属性4.1.4shadow：是否阴影true,false4.1.5states：设置状态4.2Line类4.2.1dataLabels：数据显示类4.2.1.1enabled：是否直接显示点的数据true,false5series5.1name：该条曲线名称5.2data[]：该条曲线的数据项5.3addPoint([x,y],redraw,cover)：添加描点，redraw是否重画，cover是否左移5.4setData:function(data,redraw)：重新设置Data数组，redraw是否重画5.5remove:function(redraw)：删除曲线5.6redraw:function()：重画曲线5.7marker5.7.1enabled：是否显示描点2.3柱状图2.3.1图形效果2.3.2Js代码scripttype=text/javascriptvarchart;$(document).ready(function(){chart=newHighcharts.Chart({chart:{renderTo:'container',type:'column'},title:{text:'MonthlyAverageRainfall'},subtitle:{text:'Source:WorldClimate.com'},xAxis:{categories:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']},yAxis:{min:0,title:{text:'Rainfall(mm)'}},legend:{layout:'vertical',backgroundColor:'#FFFFFF',align:'left',verticalAlign:'top',x:100,y:70,floating:true,shadow:true},tooltip:{formatter:function(){return''+this.x+':'+this.y+'mm';}},plotOptions:{column:{pointPadding:0.2,borderWidth:0}},series:[{name:'Tokyo',data:[49.9,71.5,106.4,129.2,144.0,176.0,135.6,148.5,216.4,194.1,95.6,54.4]},{name:'NewYork',data:[83.6,78.8,98.5,93.4,106.0,84.5,105.0,104.3,91.2,83.5,106.6,92.3]},{name:'London',data:[48.9,38.8,39.3,41.4,47.0,48.3,59.0,59.6,52.4,65.2,59.3,51.2]},{name:'Berlin',data:[42.4,33.2,34.5,39.7,52.6,75.5,57.4,60.4,47.6,39.1,46.8,51.1]}]});});/script2.4趋势图2.4.1图形效果2.4.2Js代码scripttype=text/javascriptvarchart;$(document).ready(function(){chart=newHighcharts.Chart({chart:{renderTo:'container',type:'line',marginRight:130,marginBottom:25},title:{text:'MonthlyAverageTemperature',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+'/bbr/'+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:'NewYork',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]}]});});/script2.5面积图2.5.1图形效果2.5.2Js代码scripttype=text/javascriptvarchart;$(document).ready(function(){chart=newHighcharts.Chart({chart:{renderTo:'container',type:'area'},title:{text:'USandUSSRnuclearstockpiles'},subtitle:{text:'Source:ahref=},xAxis:{labels:{formatter:function(){returnthis.value;//clean,unformattednumberforyear}}},yAxis:{title:{text:'Nuclearweaponstates'},labels:{formatter:function(){returnthis.value/1000+'k';}}},tooltip:{formatter:function(){returnthis.series.name+'producedb'+Highcharts.numberFormat(this.y,0)+'/bbr/warheadsin'+this.x;}},plotOptions:{area:{pointStart:1940,marker:{enabled:false,symbol:'circle',radius:2,states:{hover:{enabled:true}}}}},series:[{name:'USA',data:[null,null,null,null,null,6,11,32,110,235,369,640,1005,1436,2063,3057,4618,6444,9822,15468,20434,24126,27387,29459,31056,31982,32040,31233,29224,27342,26662,26956,27912,28999,28965,27826,25579,25722,24826,24605,24304,23464,23708,24099,24357,24237,24401,24344,23586,22380,21004,17287,14747,13076,12555,12144,11009,10950,10871,10824,10577,10527,10475,10421,10358,10295,1