highcharts知识学习

1、3d饼图制作(示例地址：3D 饼图 | JShare)

//绑定方式与echarts类似
var chart = Highcharts.chart('container', {
    chart: {
        type: 'pie',
　　　　　//是否开启3d效果
        options3d: {
            enabled: true,
            alpha: 45, //图形倾斜角度
            beta: 0
        }
    },
    title: {
        text: '2014年某网站不同浏览器访问量占比'
    }, //标题 如标题为空设置text:''即可
    tooltip: {
        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
    }, //提示框

　　//饼图配置项
    plotOptions: {
        pie: {
            allowPointSelect: true, //是否开启点击功能
            cursor: 'pointer', //指针类型
            depth: 35, //饼图的厚度
            dataLabels: { //设置数据标签
                enabled: true,
                format: '{point.name}'
            }
        }
    },
    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]
        ]
    }]
});

2、不同高度的3D饼图(示例地址：不同高度的 3D 饼图 | JShare)

//重写highchart实现过程 
var each = Highcharts.each,
    round = Math.round,
    cos = Math.cos,
    sin = Math.sin,
    deg2rad = Math.deg2rad;
Highcharts.wrap(Highcharts.seriesTypes.pie.prototype, 'translate', function(proceed) {
    proceed.apply(this, [].slice.call(arguments, 1));
    // Do not do this if the chart is not 3D
    if (!this.chart.is3d()) {
        return;
    }
    var series = this,
        chart = series.chart,
        options = chart.options,
        seriesOptions = series.options,
        depth = seriesOptions.depth || 0,
        options3d = options.chart.options3d,
        alpha = options3d.alpha,
        beta = options3d.beta,
        z = seriesOptions.stacking ? (seriesOptions.stack || 0) * depth : series._i * depth;
    z += depth / 2;
    if (seriesOptions.grouping !== false) {
        z = 0;
    }
    each(series.data, function(point) {
        var shapeArgs = point.shapeArgs,
            angle;
        point.shapeType = 'arc3d';
        var ran = point.options.h;
        shapeArgs.z = z;
        shapeArgs.depth = depth * 0.75 + ran;
        shapeArgs.alpha = alpha;
        shapeArgs.beta = beta;
        shapeArgs.center = series.center;
        shapeArgs.ran = ran;
        angle = (shapeArgs.end + shapeArgs.start) / 2;
        point.slicedTranslation = {
            translateX: round(cos(angle) * seriesOptions.slicedOffset * cos(alpha * deg2rad)),
            translateY: round(sin(angle) * seriesOptions.slicedOffset * cos(alpha * deg2rad))
        };
    });
});
(function(H) {
    H.wrap(Highcharts.SVGRenderer.prototype, 'arc3dPath', function(proceed) {
        // Run original proceed method
        var ret = proceed.apply(this, [].slice.call(arguments, 1));
        ret.zTop = (ret.zOut + 0.5) / 100;
        return ret;
    });
}(Highcharts));

//初始化highcharts
Highcharts.chart('container', {
    chart: {
        type: 'pie',
        animation: false, //关闭动画
        events: { //点击事件
            load: function() {
                var each = Highcharts.each,
                    points = this.series[0].points;
                each(points, function(p, i) {
                    p.graphic.attr({
                        translateY: -p.shapeArgs.ran
                    });
                    p.graphic.side1.attr({
                        translateY: -p.shapeArgs.ran
                    });
                    p.graphic.side2.attr({
                        translateY: -p.shapeArgs.ran
                    });
                });
            }
        },
　　　　　//开启3d效果 倾斜角度75
        options3d: {
            enabled: true,
            alpha: 75,
            beta: 0
        }
    },
　　//配置项 -- 大部分配置项都在此控制开关
    plotOptions: {
        pie: {
            allowPointSelect: true, //允许点击
            cursor: 'pointer',
            depth: 35,
            dataLabels: {
                enabled: false
            }
        }
    },
    series: [{
        type: 'pie',
        name: 'Browser share',
        data: [{
            'name': 'Firefox',
            y: 30.0,
            h: 50
        }, {
            name: 'IE',
            y: 26.8,
            h: 15
        }, {
            name: 'Chrome',
            y: 12.8,
            h: 20
        }, {
            'name': 'Safari',
            y: 8.5,
            h: 2
        }, {
            'name': 'Opera',
            y: 6.2,
            h: 15
        }, {
            'name': 'Others',
            y: 0.7,
            h: 30
        }] //改造后的数据 
    }]
});
//若在同一页面引用不规则3D饼图则其他3D饼图也会受到影响,可将数据改造成相同类型高度保持一致即可 -- [{name:'名称',y:'值',h:'饼图高度'}]