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