<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>demo</title>
<head>
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
<script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/exporting.js"></script>
<script type="text/javascript">
$(function () {
var chart;
$(document).ready(function() {
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
]
};
});
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>';
}
},
events:{
click: function(e) {
alert(e.point.type);
}
},
showInLegend: false
}
},
series: [{
type: 'pie',
name: '',
data: [
{
name: 'A',
y: 10.0,
type:'A',
},
{
name: 'B',
y: 20.0,
type:'B',
},
{
name: 'C',
y: 30.0,
type:'C',
},
{
name: 'D',
y: 30.0,
type:'D',
},
{
name: '未选择',
y: 10.0,
type:'nochoose',
}
]
}]
});
});
});
</script>
<head>
</head>
<body>
<div>
<div id="container" style="width: 500px; height: 400px; margin: 0 auto"></div>
</div>
</body>
</html>
<html lang="en">
<meta charset="utf-8">
<title>demo</title>
<head>
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
<script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/exporting.js"></script>
<script type="text/javascript">
$(function () {
var chart;
$(document).ready(function() {
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
]
};
});
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>';
}
},
events:{
click: function(e) {
alert(e.point.type);
}
},
showInLegend: false
}
},
series: [{
type: 'pie',
name: '',
data: [
{
name: 'A',
y: 10.0,
type:'A',
},
{
name: 'B',
y: 20.0,
type:'B',
},
{
name: 'C',
y: 30.0,
type:'C',
},
{
name: 'D',
y: 30.0,
type:'D',
},
{
name: '未选择',
y: 10.0,
type:'nochoose',
}
]
}]
});
});
});
</script>
<head>
</head>
<body>
<div>
<div id="container" style="width: 500px; height: 400px; margin: 0 auto"></div>
</div>
</body>
</html>
848
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
