HighchartsJS创建环形带标识的图表实例

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:0;padding:0;}
.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>

点击下载HighchartsJS创建环形图表实例DEMO