highcharts餅狀圖使用案例

在公司由於需要對訂單數據進行分析，故使用到了highcharts工具

<block name="Js">
    <script type="text/javascript">//圖表屬性，不包含數據
            var options = {
                chart: {
                    renderTo:'container',
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: false
                },
                credits: {
                    enabled:false
                },
                title: {
                    text: '各類型服務銷售餅狀圖'
                },
                legend: {
                    margin:40
                },
                tooltip: {
                    formatter: function () {
                        return this.series.name + ': ' + '<b>'+this.percentage.toFixed(2)+'%'+'</b><br/>' +
                                '訂單數： ' + this.y;
                    }
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: true,
                            format: '<b>{point.name}</b>: {point.percentage:.1f} %'+'<br/><b>訂單數：</b>{point.y}<br/><b>總金額：</b>{point.cost}元<br/><b>平均金額：</b>{point.average}元',
                            style: {
                                color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                            }
                        },
                        events: {  //綁定點擊時間
                            click: function(obj) {
                                window.location.href = obj.point.url;
                            }
                        },
                        showInLegend: true
                    }
                },
                series: [{
                    type: 'pie',
                    name: '占比：',
                    data: []
                }]
            };

        //初始函數
        if(document.getElementById('order_date_to') != null){
            $(function () {
                queryData();
            });
        }

        var pieArr = [];
        var tooltipArr = [];
        //Ajax 獲取數據並解析創建Highcharts圖表
        function queryData() {
            var orderDateFrom = document.getElementById('order_date_from').value;
            var orderDateTo = document.getElementById('order_date_to').value;
            $.ajax({
                url:'getRevenueProfiles?order_date_from='+orderDateFrom +'&order_date_to='+orderDateTo,
                type:'get',
                dataType:"json",
                success:function(data) {
                    $.each(data,function(i,dailyData){
                        var value = {name:dailyData['service_type_display'], y:parseInt(dailyData['order_count']), url:dailyData['url'], cost:parseFloat(dailyData['all_cost']), average:parseFloat(dailyData['average_cost'])};
                        pieArr.push(value);
                    });

                    options.title.text = orderDateFrom+"至"+orderDateTo+"各類服務銷售餅狀圖";
                    options.series[0].data = pieArr;

                    var chart = new Highcharts.Chart(options);
                }
            });
        }</script>
</block>

后台代碼：利用ajax傳遞數據。

效果圖：

如有問題發郵件至：[e-mail]