highcharts 的基本使用

1.下载资源：https://www.hcharts.cn/download

2.页面引入文件:

　　<script type="text/javascript" src="../libs/Highcharts-4.2.5/js/highcharts.js"></script>
　　<script type="text/javascript" src="../libs/Highcharts-4.2.5/js/exporting.js"></script>
　　<script type="text/javascript" src="../libs/Highcharts-4.2.5/js/highcharts-zh_CN.js"></script>

3.HTML

　　<div class="container">
　　　　<div id="chartBox" style="min-400px;height:400px;"></div>
　　　　<div id="chartBox-two" style="min-400px;height:400px;"></div>
　　</div>

4.JS

　　<script>

　　　　$(function(){
　　　　　　$('#chartBox').highcharts({
　　　　　　　　chart:{
　　　　　　　　　　plotBackgroundColor:null,//绘图区域的背景颜色或渐变色。
　　　　　　　　　　plotBackgroundImage: 'https://img.hcharts.cn/highcharts/graphics/skies.jpg',
　　　　　　　　　　plotBorderWidth:null,//绘图区边框宽度。单位：px 默认是：0.
　　　　　　　　　　plotShadow:false,
　　　　　　　　　　// spacing:[100,0,40,0]
　　　　　　　　},
　　　　　　　　title:{
　　　　　　　　　　text:'这是测试highCharts---one'
　　　　　　　　},
　　　　　　　　credits:{//去掉图标右下角的水印
　　　　　　　　　　enabled:false
　　　　　　　　},
　　　　　　　　series:[{
　　　　　　　　　　type:'pie',//数据列类型，例如 area, areaspline, bar, column, line, pie, scatter or spline等，只读属性。
　　　　　　　　　　innerSize:'30%',//绘制饼状图时，饼状图的圆心预留多大的空白。
　　　　　　　　　　name:'浏览器访问占比',
　　　　　　　　　　data:[
　　　　　　　　　　　　['fireFox',45.0],
　　　　　　　　　　　　{
　　　　　　　　　　　　　　name:'chrome',
　　　　　　　　　　　　　　y:12.8,
　　　　　　　　　　　　　　sliced:true,//突出
　　　　　　　　　　　　　　selected:true//选中状态
　　　　　　　　　　　　},
　　　　　　　　　　　　['IE',26.8],
　　　　　　　　　　　　['Safira',8.5],
　　　　　　　　　　　　['Opera',6.2],
　　　　　　　　　　　　['其它',0,7]
　　　　　　　　　　]
　　　　　　　　}]
　　　　})
　　　　$('#chartBox-two').highcharts({
　　　　　　title:{
　　　　　　　　text:'这是测试highCharts---two'
　　　　　　},
　　　　　　subtitle:{
　　　　　　　　text:'此数据为假数据'
　　　　　　},
　　　　　　xAxis: {
　　　　　　　　type:'category',
　　　　　　　　labels:{
　　　　　　　　　　fontSize:'13px'
　　　　　　　　}
　　　　　　},
　　　　　　yAxis: {
　　　　　　　　min:0,
　　　　　　　　title:'所占百分比（%）'
　　　　　　},
　　　　　　credits:{
　　　　　　　　enabled:false
　　　　　　},
　　　　　　tooltip:{
　　　　　　　　formatter:function(){
　　　　　　　　　　return '<b>'+this.key+'</b>浏览器占比<b>'+this.y+'%</b>'
　　　　　　　　}
　　　　　　},
　　　　　　series:[{
　　　　　　　　type:'column',
　　　　　　　　name:'浏览器访问占比',
　　　　　　　　data:[
　　　　　　　　　　　　['fireFox',45.0],
　　　　　　　　　　　　{
　　　　　　　　　　　　　　name:'chrome',
　　　　　　　　　　　　　　y:12.8,
　　　　　　　　　　　　　　sliced:true,//突出
　　　　　　　　　　　　　　selected:true
　　　　　　　　　　　　},
　　　　　　　　　　　　['IE',26.8],
　　　　　　　　　　　　['Safira',8.5],
　　　　　　　　　　　　['Opera',6.2],
　　　　　　　　　　　　['360',0.5],
　　　　　　　　　　　　['QQ',1.1],
　　　　　　　　　　　　['其它',4.7]
　　　　　　　　　　],
　　　　　　　　　　dataLabels:{
　　　　　　　　　　　　enabled:true,
　　　　　　　　　　　　// rotation:10,//刻度标签旋转度数
　　　　　　　　　　　　y:-3,
　　　　　　　　　　　　x:2
　　　　　　　　　　}
　　　　　　　}]
　　　　　})
　　})

</script>

5.效果图