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.效果图