highcharts饼图及点击事件

       highcharts是一个javascript图表库，支持曲线图、柱状图、饼图、散点图等。具体的demo可查看官方网站：highcharts示例

       使用之前肯定要引入相应的js文件，以3d饼图为例，需要引用highcharts.js和highcharts-3d.js，两个文件可到官网下载。参数div为饼图在html中的容器的id，pieTitle和pieSubTitle为饼图的标题和副标题，pieSeriesName是字段值的名称。pieSeriesData是一个数组，每个元素也是一个数组，包括字段名和字段值两个元素，字段值必须为数值型。

pieSeriesData = new Array();.push(new Array(key,value));

function pieChart(div) {
    Highcharts.chart(div, {
        chart: {
            type: 'pie',
            options3d: {
                enabled: true,
                alpha: 45
            }
        },
        title: {
            text: pieTitle
        },
        subtitle: {
            text: pieSubTitle
        },
        plotOptions: {
            pie: {
                innerSize: 100,
                depth: 45,
                events: {
                    click: function (e) {pieClick(e.point.name);}    
                }
            }
        },
        series: [{
            name: pieSeriesName,
            data: pieSeriesData
        }]
    });
}

饼图的点击事件

function pieClick(name){

//name为所点击的饼图区域的key值，即pieSeriesData中配置的数据源中的key，可根据key值进行相关操作。

}

效果图如下：