本文主要是介绍highcharts饼图添加单击事件，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
出处：不记得了，致歉作者
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 colorsHighcharts.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 chartchart = 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>
这篇关于highcharts饼图添加单击事件的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
