JQuery Highcharts图表控件使用说明

Highcharts 官网： http://www.highcharts.com

Highcharts 官网示例：http://www.highcharts.com/demo/

Highcharts 官网文档：http://www.highcharts.com/documentation/how-to-use

 

<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
<script type="text/javascript" src="js/highcharts.js"></script>
<script type="text/javascript" src="js/modules/exporting.js"></script>
<script type="text/javascript">

var chart;$(document).ready(function() {chart = new Highcharts.Chart({chart: {renderTo: 'container',
//放置图表的容器defaultSeriesType: 'column'
//图表类型line, spline, area, areaspline, column, bar, pie , scatter},title: {text: '平均每月降水量'},subtitle: {text: '数据来源: WorldClimate.com'},xAxis:
 {categories: [ //X轴的坐标值'一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']},yAxis: {min: 0,title: {text: '降水量 (mm)'}},legend:
 { //图例位置样式layout: 'vertical',//图例显示的位置：水平（horizontal）/垂直（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: '北京',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: '上海',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: '广州',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: '南京',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]}]});});

</script>




<div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>
饼状图定义数据源如下：

 series: [{
						type: 'pie',
						name: 'Browser share',
						data: [
							['Firefox',   45.0],
							['IE',       26.8],
							{
								name: 'Chrome',    
								y: 12.8,
								sliced: true,
								selected: true
							},
							['Safari',    8.5],
							['Opera',     6.2],
							['Others',   0.7]
						]
					}]