HighCharts入门

引用HighCharts做图表

第一步 加载HighCharts

方法一：引入官网提供的CDN服务

<script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>

方法二：在官网下载对应的js文件，引入到项目中（文件中）

<script type="text/javascript" src="js/highcharts.js"></script>

第二步 准备一个容器用来加载图标

<div id="myChart" style="height:500px;width:600px;"></div> 
 //用id标识该容器，以便后面的绑定，一般表格的大小默认是auto（自动），会根据div大小自动改变大小

第三步 配置图表并初始化

一般情况下，Highcharts 包含 ：标题（Title）、[ 副标题（subTitle）]、坐标轴（Axis）[ x轴（xAxis）和y轴（yAxis）]、数据列（Series）、数据提示框（Tooltip）、图例（Legend）、版权标签（Credits）等，另外还可以包括导出功能按钮（Exporting）、标示线（PlotLines）、标示区域（PlotBands）、数据标签（dataLabels）等。

方法一：先配置图表内容，后进行初始化，将配置信息绑定到对应容器中。

<script type="text/javascript">
	var options = {
		chart: {
			type: 'bar'                          //指定图表的类型，默认是折线图（line）
		},
		title: {
			text: '我的第一个图表'                 // 标题
		},
		xAxis: {
			categories: ['苹果', '香蕉', '橙子']   // x 轴分类
       		},
    	yAxis: {
        	title: {
            	text: '吃水果个数'                // y 轴标题
        	}
    	},
    	series: [{                              // 数据列
        	name: '小明',                        // 数据列名
        	data: [1, 0, 4]                     // 数据
        	}, {
        	name: '小红',
        	data: [5, 7, 3]
      		}]
    	};
   	 	// 图表初始化函数
    	var chart = Highcharts.chart('myChart', options);
</script>

方法二：绑定容器并进行初始化

$(function(){
    myChart();
    function myChart(){
        var  chart = Highcharts.chart('pieChart', {
            chart: {
                type: 'bar'         //指定图表的类型，默认是折线图（line）
            },
            title: {
                text: '我的第一个图表'                 // 标题
            },
            xAxis: {
                categories: ['苹果', '香蕉', '橙子']   // x 轴分类
            },
            yAxis: {
                title: {
                    text: '吃水果个数'                // y 轴标题
                }
            },
            series: [{                              // 数据列
                name: '小明',                        // 数据列名
                data: [1, 0, 4]                     // 数据
                }, 
                {
                name: '小红',
                data: [5, 7, 3]
            }]
        });
    }
})

如下就是相应的图啦：

提示：两个方法都写在<script type="text/javascript"></script>内

常用的方法（其他的可以自行查看API）

**饼状图：可以加一个属性color（列表），存放每个扇区的颜色**
eg：colors:[red，yellow，green，...] 

**版权是否显示**
credits:{enabled:false},		//去掉版权

**饼状图events事件：**
	// 每个扇区是数据点对象，所以事件应该写在 point 下面
	point: {   
		events: {         //事件函数
			// 鼠标滑过是，突出当前扇区
			mouseOver: function() {
				this.slice();
			},
			// 鼠标移出时，收回突出显示
			mouseOut: function() {
				this.slice();
			},
			// 默认是点击突出，这里屏蔽掉
			click: function() {
				return false;
			}
		}
	}

**饼状图内外圈大小设置**
    series: [{
		size: '80%',//外圈
		innerSize: '60%',//内圈
		type: 'pie'
    }]

偏移量设置：
legend: {
	floating:true,//设置偏移
	x:-20,  //x偏移量
	y:20    //y偏移量
}

是否显示图标背景网格（XAxis、YAxis）
	splitLine:{show: false},//去除网格线
	splitArea : {show : true}//保留网格区域

API为：> https://api.hcharts.cn/highcharts#global
链接: 我的博客.
带尺寸的图片: