highcharts实现一个关联饼状图图表效果代码-html代码-BFW代码库

代码语言：html
所属分类：图表
代码描述：highcharts实现一个关联饼状图图表效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="keywords" content="">

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/highcharts.js"></script>
</head>

<body>
    <div id="container" style="width:1000px;height:500px;margin:100px auto;"></div>
    <script>
        var categories = [
                    "Chrome",
                    "Firefox",
                    "Safari",
                    "other",
                    "IE",
                ],
                data = [
                    {
                        "y": 30,
                        "drilldown": {
                            "name": "Chrome",
                            "categories": [
                                "Chrome v65",
                                "Chrome v64",
                                "Chrome v63"
                            ],
                            "data": [
                                20,
                                30,
                                50
                            ]
                        }
                    },
                    {
                        "y": 10,
                        "drilldown": {
                            "name": "Firefox",
                            "categories": [
                                "Firefox v65",
                                "Firefox v64",
                                "Firefox v63",
                                "Firefox v62",
                                "Firefox v61",
                                "Firefox v60",
                                "Firefox v65",
                                "Firefox v64",
                                "Firefox v63",
                                "Firefox v62",
                                "Firefox v61",
                                "Firefox v60",
                                "Firefox v65",
                                "Firefox v64",
                                "Firefox v63",
                                "Firefox v62",
                                "Firefox v61",
                                "Firefox v60",
                                "Firefox v59"
                            ],
                            "data": [
                                10,
                                10,
                                10,
                                10,
                                10,
                                10,
                                10,
                                10,
                                10,
                                10,
                                10,
                                10,
                                10,
                                10,
                                10,
                                10,
                                10,
                                10,
                                40
                            ]
                        }
                    },
                    {
                        "y": 30,
                        "drilldown": {
                            "name": "Safari",
                            "categories": [
                                "Safari v65",
                                "Safari v64",
                                "Safari v63"
                            ],
                            "data": [
                                70,
                                20,
                                10
                            ]
                        }
                    },
                    {
                        "y": 30,
                        "drilldown": {
                            "name": "other",
                            "categories": [
                                "other1",
                                "other2",
                                "other3"
                            ],
                            "data": [
                                50,
                                40,
                                10
                            ]
                        }
                    },
                    {
                        "y": 20,
                        "drilldown": {
                            "name": "IE",
                            "categories": [
                                "IE v65",
                                "IE v64",
                                "IE v63"
                            ],
                            "data": [
                                40,
                                40,
                                10
                            ]
                        }
                    },
                ];
        var totalData = [],
                partData = [],
                i,
                j,
                dataLen = data.length,
                randomNum,
                drillDataLen;
        for (i = 0; i < dataLen; i += 1) {
            totalData.push({
                name: categories[i],
                y: data[i].y
            });
            var cell = [];
            partData.push(cell);
            drillDataLen = data[i].drilldown.data.length;
            for (j = 0; j < drillDataLen; j += 1) {
                partData[i].push({
                    name: data[i].drilldown.categories[j],
                    y: data[i].drilldown.data[j],
                });
            }
        }
        Highcharts.setOptions({
            colors: [ '#fd4f68', '#fb9447', '#fff14d','#69df6d', '#31ffec','#2dcbfb','#8b3ffb','#e63edc']
        });
        Highcharts.chart('container', {
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false,
                type: 'pie',
                animation: false
            },
            title: {
                text: '浏览器市场份额'
            },
            subtitle: {
                text: '数据来源：<a href="#">netmarketshare.com</a>'
            },
            tooltip: {
                pointFormat: '{series.name}: <b>{point.y}</b>'
            },
            plotOptions: {
                pie: {
                    animation: false,
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: false
                    },
                    point: {
                        events: {
                            legendItemClick: function () {
                                return false;
                            }
                        }
                    },
                    events: {
                        click: function (e) {
                            this.chart.series[1].setData(partData[e.point.index], true, true, false);
                            var parentSeries = this.chart.series[0],
                                    points = parentSeries.points,
                                    paretPoint = points[e.point.index],
                                    targetSeries = this.chart.series[1],
                                    renderer = this.chart.renderer,
                                    shapeArgs = paretPoint.shapeArgs,
                                    targetCenter = targetSeries.center;
                            var poin1 = [shapeArgs.x + this.chart.plotLeft + Math.cos(shapeArgs.start) * shapeArgs.r, shapeArgs.y + this.chart.plotTop + Math.sin(shapeArgs.start) * shapeArgs.r];
                            var poin2 = [shapeArgs.x + this.chart.plotLeft + Math.cos(shapeArgs.end) * shapeArgs.r, shapeArgs.y + this.chart.plotTop + Math.sin(shapeArgs.end) * shapeArgs.r];
                            var radius = ((this.chart.plotTop + targetCenter[1] + targetCenter[2] / 2) - (this.chart.plotTop + targetCenter[1] - targetCenter[2] / 2)) / 2;
                            var ceny = radius + (this.chart.plotTop + targetCenter[1] - targetCenter[2] / 2);
                            var cen = [targetCenter[0] + this.chart.plotLeft, ceny];
                            var pointObj = getCircleTangent(poin1, cen, radius);
                            var pointObj2 = getCircleTangent(poin2, cen, radius);
                            //start
                            var x1 = pointObj.point1.x;
                            var y1 = pointObj.point1.y;
                            var x2 = pointObj.point2.x;
                            var y2 = pointObj.point2.y;
                            //end
                            var xx1 = pointObj2.point1.x;
                            var yy1 = pointObj2.point1.y;
                            var xx2 = pointObj2.point2.x;
                            var yy2 = pointObj2.point2.y;
                            var starty = shapeArgs.y + this.chart.plotTop + Math.sin(shapeArgs.start) * shapeArgs.r;
                            var endy = shapeArgs.y + this.chart.plotTop + Math.sin(shapeArgs.end) * shapeArgs.r;
                            if (starty < endy) {
                                var yVal = (y1 < y2) ? y1 : y2;
                                var xVal = (yVal == y1) ? x1 : x2;
                                var yyVal = (yy1 < yy2) ? yy2 : yy1;
                                var xxVal = (yyVal == yy2) ? xx2 : xx1;
                                var paths = ['M',
                                    shapeArgs.x + this.chart.plotLeft + Math.cos(shapeArgs.start) * shapeArgs.r,
                                    shapeArgs.y + this.chart.plotTop + Math.sin(shapeArgs.start) * shapeArgs.r,
                                    'L',
                                    xVal,
                                    yVal,
                                    'M',
                                    xxVal,
                                    yyVal,
                                    'L',
                                    shapeArgs.x + this.chart.plotLeft + Math.cos(shapeArgs.end) * shapeArgs.r,
                                    shapeArgs.y + this.chart.plotTop + Math.sin(shapeArgs.end) * shapeArgs.r
                                ];
         .........完整代码请登录后点击上方下载按钮下载查看