hightcharts制作饼状图

      最近用到了饼状图，学习了highcharts，简单记录一下

         highcharts一个开源js框架，用于制作各种图表，学习免费，商用收费！

         echarts也是个开源框架，用于制作各种图表，学习和商用都是免费。echarts的API更加详细

 一、js引用

    <script src="charts/highcharts.js"></script>
    <script src="charts/highcharts-3d.js"></script>
    <script src="charts/exporting.js"></script>
    <script src="charts/highcharts-zh_CN.js"></script>

二、HTML部分

                   <div  class="div1" style="height:250px;width:700px;" >
                        <div id="containerA" class="div-inline" style="height:250px;width:50%;" ></div>
                        <div id="containerB" class="div-inline" style="height:250px;width:50%;" ></div>
                    </div>

三、js代码：

//饼状图
        var piePicture = {
                chart: {//通用设置
                    type: 'pie',//类型
                    options3d: {//3d设置
                        enabled: true,
                        alpha: 45,
                        beta: 0
                    }
                }, 
                title: {//标题
                    text: '烟草品牌前三'
                },
                credits: {//版权信息
                    enabled: false
                },
                navigation: {//导出模块中显示的按钮的选项集合
                    buttonOptions: {
                        enabled: false
                    }
                },
                tooltip: {// 提示框
                    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                },
                plotOptions: {//数据列配置    
                    series: {
                        allowPointSelect: true,//是否允许在点击数据点标记
                        cursor: 'pointer',//指定鼠标滑过数据列时鼠标的形状
                        backgroundColor: '#00F5FF',
                        depth: 35,
                        dataLabels: {//数据标签
                            enabled: true,
                            format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                            style: {
                                color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                            }
                        }
                    }
                },
                series: [{//数据列
                    name:'占比',
                    colorByPoint: true,
                    data: [ {name: '利群',y: 11.84,}, 
                            {name: '红双喜',y: 10.85}, 
                            {name: '软中华',y: 4.67}, 
                            {name: '其他',y: 4.18}]
                }]
            }
        $('#containerA').highcharts(piePicture);
        $('#containerB').highcharts(piePicture);

 

四、效果图