因为项目需要，要做一个投票系统，用饼图展示用户选择了哪些选项，同时点击每个饼图，显示相应的用户。
 
系统采用了net+jquery+highcharts开发。
 
前端代码如下：
 
<html >
<head >
    <title>无标题页</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript"  src="js/highcharts.js"></script>
 
<script type="text/javascript">
 
$(function () {
    var chart;
    $(document).ready(function() {
    
    // Radialize the colors
Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function(color) {
    return {
        radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 },
        stops: [
            [0, color],
            [1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
        ]
    };
});
 
// Build the chart
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false
            },
            title: {
                text: '你幸福吗？' //选择题的标题
            },
            tooltip: {
            pointFormat: '{point.txt}: <b>{point.percentage}%</b>',  //鼠标放在每个饼图上显示内容。显示 “选项：百分比”
            percentageDecimals: 1
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: true,
                        color: '#000000',
                        connectorColor: '#000000',
                        formatter: function() {
                            return '<b>'+ this.point.name +'</b>: '+ this.point.num +' 人'; //在饼图上直接显示 “A:多少人”
                        }
                    },
                    events:{
                        click: function(e) {
 window.open('123.aspx?type='+e.point.type+'&id='+e.point.tid); //单击每个饼图打开一个页面，同时传递参数，单击了哪个饼图，题                                                                //目id是多少。
                        }
                    },
                    showInLegend: false
                    
                }
            },
            series: [{
                type: 'pie',
                name: '',              //name，type，data是内置参数。不能自己定义一个参数。
                data: [                //整个data数组，可以从后台数据库读取之后，用string变量形成一个字符串，然后输出到这个位置。即<% =str %>,也可以用ajax实现。
                    {
                        name: 'A',    //name,y,sliced,selected是highchart的内置参数，下面的txt，type，tid，num是自己定义的。
                        y: 10.0,
txt: '幸福',  //这些是自己定义的，使用时，用this.point.txt或者e.point.txt来用。
type:'A',
tid: '123',
num:20,
                        sliced: true,   //true代表选中。可以将正确答案默认选中。
                        selected: true
                    },
{
                        name: 'B',
                        y: 20.0,
txt: '不幸福',
tid: '123',
type:'B',
num:40
                    },
{
                        name: 'C',
                        y: 30.0,
txt: '被幸福',
tid: '123',
type:'C',
num:60
                    },
{
                        name: 'D',
                        y: 30.0,
txt: '我姓曾',
tid: '123',
type:'D',
num:60
                    },
{
                        name: '未选择',
                        y: 10.0,
txt: '未选择',
tid: '123',
type:'nochoose',
num:20
                    }
                ]
            }]
        });
    });
    
});  
</script>
<head>
</head>
<body>
    <form id="form1" >
    <div>    
<div id="container" style="width: 500px; height: 400px; margin: 0 auto"></div>
    </div>
    </form>
</body>
</html>

效果图如下：