highcharts饼图添加单击事件

最新推荐文章于 2024-09-09 14:08:32 发布

beMyselfeveryday

最新推荐文章于 2024-09-09 14:08:32 发布

阅读量9.2k

点赞数

分类专栏： HTML 文章标签： highcharts饼图添加单击事件

HTML 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

出处：不记得了，致歉作者

highcharts饼图添加单击事件


因为项目需要，要做一个投票系统，用饼图展示用户选择了哪些选项，同时点击每个饼图，显示相应的用户。

 

系统采用了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>