小白瞎搞--Highcharts图表的基础使用，让前端页面有点小6

Highcharts 是一个用纯JavaScript编写的一个图表库， 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表，并且免费提供给个人学习、个人网站和非商业用途使用。HighCharts支持的图表类型有曲线图、区域图、柱状图、饼状图、散状点图和综合图表。

点击进入官网

直接上实例：

1. 下载官网提供的js包
   注意前提要引入了jq基本文件。因为它也是基于jq开发的图表
   把官网下载的压缩包解压后，只引入code文件夹中的：
   

2. 看看官网给的实例，了解基本参数，例如饼状图：

```java
//首先页面上有一个div的id为“container”
<div id="container" style="min-width:400px;height:400px"></div>
//container对应的就是div的id
`Highcharts.chart('container', {
	chart: {
		plotBackgroundColor: null,
		plotBorderWidth: null,
		plotShadow: false,
		type: 'pie'//图表类型
	},
	title: {
		text: '2018年1月浏览器市场份额'//图表的标题
	},
	tooltip: {
		pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'//精确到几位
	},
	plotOptions: {
		pie: {
			allowPointSelect: true,
			cursor: 'pointer',
			dataLabels: {
				enabled: true,
				format: '<b>{point.name}</b>: {point.percentage:.1f} %',
				style: {
					color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
				}
			}
		}
	},
	series: [{
		name: 'Brands',
		colorByPoint: true,
		//特别注意是这里data的数据格式为json格式
		data: [{
			name: 'Chrome',
			y: 61.41,
			sliced: true,
			selected: true
		}, {
			name: 'Internet Explorer',
			y: 11.84
		}, {
			name: 'Firefox',
			y: 10.85
		}, {
			name: 'Edge',
			y: 4.67
		}, {
			name: 'Safari',
			y: 4.18
		}, {
			name: 'Sogou Explorer',
			y: 1.64
		}, {
			name: 'Opera',
			y: 1.6
		}, {
			name: 'QQ',
			y: 1.2
		}, {
			name: 'Other',
			y: 2.61
		}]
	}]
});`

3. 按照图表要求的相关格式，从后台传入数据，然后就可以展示前端就可以根据后台的数据展示对应的图表了

如果图表没有出来，先打开前端页面的调试器，看看json数据是否符合要求。哪怕是一个双引号都会引起图标的异常