4-Highcharts 3D图之3D普通饼图

时间:2024-03-22 16:07:32
<!DOCTYPE>
<html lang='en'>
<head>
<title>4-Highcharts 3D图之3D普通饼图</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<script src="../jquery-2.1.4/jquery.min.js"></script>
<script src="../Highcharts-4.2.5/js/highcharts.js"></script>
<script src="../Highcharts-4.2.5/js/highcharts-3d.js"></script>
<script src="../Highcharts-4.2.5/js/themes/gray.js"></script><!--主题   -->

<script>
$(function () {
    var chart = new Highcharts.Chart({ 

        chart:{
            renderTo:'container',//图表描绘出后放到页面的某一具体位置
            type:'pie',//饼图 line线性图,colmun柱状图
            //边距是指图表的外边与图形区域之间的距离,数组分别代表上、右、下和左。要想单独设置可以用marginTop,marginRight,marginBotton 和 marginLeft.
            marginTop:80,
            marginRight:40,
            //3D图像设置项。3D效果需要引入highcharts-3d.js,下载或者在线路径为code.highcharts.com/highcharts-3d.js.
            options3d:{
                enabled:true,//画图表是否启用3D函数,默认值为:false
                alpha:10//3D图旋转角度,此为α角,内旋角度默认为0
                //beta:25,//3D图旋转角度,此为β角,外旋角度 默认为0
                //图表的全深比,即为3D图X,Y轴的平面点固定,以图的Z轴原点为起始点上下旋转,值越大往外旋转幅度越大,值越小往内旋转越大,depth的默认值为100
                //默认是: 100
                //depth:70,
                //viewDistance: 25//它定义了观看者在图前看图的距离,它是非常重要的对于计算角度影响在柱图和散列图,此值不能用于3D的饼图,默认值为100
            }

        },

        /************标题***************/
        //标题默认显示在图表的顶部,包括标题和副标题(subTitle),其中副标题是非必须的。
        //主标图
        title: {
            text:'浏览器占市场比例'

        },
        //副标题
        subtitle: { 

        },

        //plotOptions用于设置图表中的数据点相关属性。
        plotOptions: {
            pie:{
                // 是否将每个系列的值叠加在彼此的顶部上。
                //stacking: 'normal',
                allowPointSelect:true,
                cursor:'pointer',
                dataLabels:{
                    enabled:true,
                    format:'{point.name}'
                }
                //depth:25
            }

        },

        /************坐标轴***************/
        //所有的图表除了饼图都有X轴和Y轴,默认情况下,x轴显示在图表的底部,y轴显示在左侧
        //(多个y轴时可以是显示在左右两侧),通过设置chart.inverted = true 可以让x,y轴显示位置对调
        //xAxis: {
            //获取月份的简称
            //categories: Highcharts.getOptions().lang.shortMonths
            //categories:['A','B','C','D','E']
        //},
        //yAxis: {
            //是否在正常显示的对立面显示轴。
            //正常是垂直坐标轴显示在左边,水平坐标轴显示在底部,因此对立面就是垂直坐标轴显示在右边和水平坐标轴显示在顶部,这通常用于有两个或多个坐标轴。
            //opposite: true
        //},

        /*************版权信息**********************/
        credits:{
             enabled:false // 禁用版权信息
        },

        /*************数据提示框**********************/
        //tooltip: { valueSuffix: '°C' },
        tooltip: {
            headerFormat: '<b>{point.key}</b><br>',
            pointFormat: '<span style="color:{series.color}">\u25CF</span> {series.name}: {point.percentage:.lf}%'
        },

        /************图例***************/
        //省略图例会在下面显示
        //也可以设置 设置在下方
        legend: {
            //layout: 'horizontal',//horizontal,vertical
            //align: 'center',
            //verticalAlign: 'bottom',
            //borderWidth: 0
            //enabled:false//关闭图例
        }, 

        /*****************数据列******************/
        /*
        series: [
            {
                name: 'Sales',
                //data: [2, 3, 5, 7, 9, 5, 1, 4, 6, 3]
                //如果有个值为空的话,只需设为null
                data: [2, 3, 5, null, 9, 5, 1, 4, 6, 3]

            }
        ]*/
        /*
         series: [{
            name: 'AA',
            data: [5, 3, 4, 7, 2],
            //此选项允许在堆叠图表中的分组系列。堆栈选项可以是一个字符串或一个数字或其他任何东西,只要分组的系列“堆栈选项”相互匹配。
            stack: '1'
        }, {
            name: 'BB',
            data: [3, 4, 4, 2, 5],
            stack: '1'
        }, {
            name: 'CC',
            data: [2, 5, 6, 2, 1],
            stack: '2'
        }, {
            name: 'CC',
            data: [3, 0, 4, 4, 3],
            stack: '2'
        }]
        */
        series: [{
            type: 'pie',
            name: '所占比例',
            data: [
                ['Firefox',   45.0],
                ['IE',       26.8],
                {
                    name: 'Chrome',
                    y: 12.8,
                    sliced: true,//属于饼图,是否显示
                    selected: true//是否默认选中
                },
                ['Safari',    8.5],
                ['Opera',     6.2],
                ['Others',   0.7]
            ]
        }]
    });

    /*
    chart: {
            renderTo: 'container',
            type: 'column',
            margin: 75,
            options3d: {
                enabled: true,
                alpha: 15,
                beta: 15,
                depth: 50,
                viewDistance: 25
            }
        },
        title: {
            text: 'Chart rotation demo'
        },
        subtitle: {
            text: 'Test options by dragging the sliders below'
        },
        plotOptions: {
            column: {
                depth: 25
            }
        },
        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }]
    });
    */
    /*

    $('#R0').on('change', function(){
        chart.options.chart.options3d.alpha = this.value;
        showValues();
        chart.redraw(false);
    });
    $('#R1').on('change', function(){
        chart.options.chart.options3d.beta = this.value;
        showValues();
        chart.redraw(false);
    });

    function showValues() {
        $('#R0-value').html(chart.options.chart.options3d.alpha);
        $('#R1-value').html(chart.options.chart.options3d.beta);
    }
    showValues();

    */
});
</script>

</head>

<body>
<div id="container" style="min-width:700px;height:400px"></div>

<!-- 调节部分 -->
<div id="sliders" style="min-width:310px;max-width: 800px;margin: 0 auto;">
    <table>
        <tr>
            <td>Alpha Angle</td><!-- 内旋角 -->
            <td>
                <input id="R0" type="range" min="0" max="45" value="15"/>
                <span id="R0-value" class="value"></span>
            </td>
        </tr>
        <tr>
            <td>Beta Angle</td><!-- 外旋角 -->
            <td>
                <input id="R1" type="range" min="0" max="45" value="15"/>
                <span id="R1-value" class="value"></span>
            </td>
        </tr>
    </table>
</div>
</body>

</html>

4-Highcharts 3D图之3D普通饼图