HighchartsJS 是一款功能强大、开源、美观、图表丰富、兼容绝大多数浏览器的纯js图表库，目前最新版本库是Highcharts 4.1.9。另外，HighchartsJS还提供很多的插件和第三方扩展，但那些不是本文所要描述的主要内容，在此不表。笔者只说说自己曾经使用过的案例以及对案例的注释。
笔者已经用HighchartsJS创建过两种关于统计类的图表实例，一种是点状的带标识的，如图：
另外一种是环形带标识的，如图：
下面是HighchartsJS创建环形图表实例代码：
引用（基于jq，jq和highcharts.js请自行去官网下载）：
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="highcharts.js"></script>
HTML code:
<div id="chart" class="chart"></div>
CSS code:
<style>
*{margin:;padding:;}
.chart{height:600px;}
</style>
JS code:
<script>
$(function(){ //饼状图
var categories = ['财富定期', '消费理财', '财富快乐宝', '财富活期'],
data = [{
drilldown: {
name: '',
categories: ['财富定期', '消费理财', '财富快乐宝', '财富活期'],
data: [25, 25, 25, 25], //数据，即this.y
}
}]; // 创建数组
var fuhuiData = [];
var percentData = [];
for (var i = 0; i < data.length; i++) {
// 添加名称
fuhuiData.push({
name: categories[i],
y: data[i].y,
}); // 添加百分比
for (var j = 0; j < data[i].drilldown.data.length; j++) {
var brightness = 0.2 - (j / data[i].drilldown.data.length) / 5 ;
percentData.push({
name: data[i].drilldown.categories[j],
y: data[i].drilldown.data[j],
});
}
} // 创建图表
$('#chart').highcharts({
chart: {
type: 'pie' //图表的类型
},
title: { //设置标题并将标题置于环形图表中间
text: '<span style="font-size:50px;font-family:Arial;color:#606060;" >100.00</span><span style="color:#606060;"> 元</span>'+'<br><span style="font-size:18px;color:#606060;">总资产</span>',
verticalAlign: 'middle',
},
yAxis: {
title: {
text: ''
}
},
plotOptions: {
pie: {
size: '50%',
innerSize: '86%', //配置环形大小
shadow: false,
center: ['50%', '50%'], //水平和垂直方向居中
colors: [ //设置饼状图的颜色
'#f25252', //第一个颜色
'#9e6df0', //第二个颜色
'#f9823a', //第三个颜色
'#77aaee', //第三个颜色
],
dataLabels: {
//connectorColor: '#f00', //设置连接线的颜色
style: { //设置标识文字的样式
color: '#424242',
fontSize: '18px',
fontWeight: 'normal', //字体不加粗
},
}
}
},
tooltip: {
valueSuffix: '%'
},
series: [{
name: '百分比', //数据列名
data: percentData,
dataLabels: {
formatter: function() {
// display only if larger than 1
//return this.y > 1 ? '<b>'+ this.point.name +':</b> '+ this.y +'%' : null; //这串代码设置了加粗
return this.y > 1 ? ''+ this.point.name +': '+ this.y +'%' : null;
}
}
}],
credits: {
enabled:false, // 默认值，如果想去掉版权信息Highcharts.com，设置为false即可
}
}); //设置饼状图中间文字的上下间隔
$(".highcharts-title").find("tspan").last().attr("dy",43); }) </script>