Dari pada ribet, saya contohkan bagaimana membuat pie chart dengan highchart disertai link atau URL-nya.
//CSS
<link href="jquery-ui.min.css" rel="stylesheet">
//VIEW
<div id="chart"></div>
//JQUERY & JAVASCRIPT
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="highcharts.js"></script>
<script type="text/javascript" src="highcharts-3d.js"></script>
<script type="text/javascript" src="exporting.js"></script>
<script type="text/javascript">
$(function () {
$('#chart').highcharts({
credits: {
enabled: false
},
title: {
text: '',
style: {
display: 'none'
}
},
// title: {
// style: {
// display: 'none'
// },
// text: 'REKAPITULASI LAPORAN PROGRES KEUANGAN',
// style: {
// fontWeight: 'bold',
// color: '#E0E0E3',
// textTransform: 'uppercase'
// }
// },
tooltip: {
valueSuffix: ',-'
},
chart: {
type: 'pie',
options3d: {
enabled: true,
alpha: 45
},
backgroundColor: {
linearGradient: {x1: 0, y1: 0, x2: 1, y2: 1},
stops: [
[0, '#395168']
]
},
plotBorderColor: '#606063'
},
plotOptions: {
pie: {
innerSize: 100,
depth: 45
},
dataLabels: {
color: '#B0B0B3'
},
marker: {
lineColor: '#333'
},
boxplot: {
fillColor: '#505053'
},
candlestick: {
lineColor: 'white'
},
errorbar: {
color: 'white'
}
},
exporting: {
enabled: false
},
series: [{
type: 'pie',
name: 'Rp',
cursor: 'pointer',
point: {
events: {
click: function (e) {
location.href = e.point.url;
e.preventDefault();
}
}
},
data: [
{name: 'Pendapatan',
color: '#31C0BE',
y: 10000000,
url: 'http://phpaku.blogspot.com/#pendapatan'
},
{name: 'Belanja Langsung',
color: '#D58665',
y: 6000000,
url: 'http://phpaku.blogspot.com/#pendapatan'
},
{name: 'Belanja Tidak Langsung',
color: '#37619d',
y: 2500000,
url: 'http://phpaku.blogspot.com/#pendapatan'
}
]
}]
});
});
</script>
Sumber: highcharts[dot]com
Sekian, terimakasih atas kunjungannya.
Salam,
PHP Aku : Membangun web terorganisasi dan mudah dimengerti, contoh tutorial dengan menggunakan HTML, CSS, JavaScript, SQL, PHP, dan XML.
EmoticonEmoticon