[javascript] highcharts, 차트, 통계

api url : http://www.highcharts.com/products/highcharts

<script type="text/jscript" src="../../common/js/highcharts.js"></script>
<script type="text/jscript" src="../../common/js/exporting.js"></script>
 
<script type="text/javascript">
 
    $(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
                ]
            };
        });
 
        $('#stats').highcharts({
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false
            },
            title: {
                text: '제목 작성',
                style: { "font-weight": "bold", "color": "#333333" }
            },
            tooltip: {
                pointFormat: '{series.name}: <b>{point.y}</b> ({point.percentage:.1f}%)'
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: true,
                        format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                        style: {
                            color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                        }
                    }
                }
            },
            series: [{
                type: 'pie',
                name: '값',
                data: [
                        ['test1', parseFloat($("#test1").html())],
                        ['test2', parseFloat($("#test2").html())],
                        ['test3', parseFloat($("#test3").html())],
                        ['test4', parseFloat($("#test4").html())],
                        ['test5', parseFloat($("#test5").html())]
                ]
            }]
        });
 
</script>
 
<div id="stats" style="float:left; width: 49%; height: 400px; margin: 0 auto; border:1px solid #999;"></div>