highecharts 3d饼图，引线文字

最新推荐文章于 2024-10-15 12:55:33 发布

原创最新推荐文章于 2024-10-15 12:55:33 发布 · 5.8k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#3d #饼图 #highecharts

本文介绍如何使用Highcharts绘制3D饼图，并通过代码实现自定义颜色和数据标签，解决引线与文字对应的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近因为项目需要3d图例，原先用echarts画的图例就不能用了，所以只能改用highchars。话不多少，直接上图+代码，

本人开发时，图例出来后，引线和引线的文字不能对应，饼图块的颜色，搜索了很多知识，终于完成如下代码：

<html>
<head>
    <meta charset="UTF-8" />
    <title>饼图</title>
    <script type="text/javascript" src="plugins/jquery/jquery-1.12.4.min.js" charset="UTF-8"></script>
    <script type="text/javascript" src="plugins/echarts/highcharts.js" charset="UTF-8"></script>
    <script type="text/javascript" src="plugins/echarts/highcharts-3d.js" charset="UTF-8"></script>
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script type="text/javaScript">

    var pieColors = (function () {     // 此处是基础着色，如果设置好颜色，此处就没有看的必要了
        var colors =[],
                base = Highcharts.getOptions().colors[0],
                i;

        for (i = 0; i < 10; i += 1) {
            // Start out with a darkened base color (negative brighten), and end
            // up with a much brighter color
            colors.push(Highcharts.Color(base).brighten((i - 3) / 7).get());
        }
        return colors;
    }());
    $(document).ready(function() {
        var chart = {
            type: 'pie',
            options3d: {
                enabled: true,
                alpha: 45,
                beta: 0
            }
        };
        var title = {
            text: '测试占有率'
        };
        var tooltip = {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        };
        var colors=['#FF0000','#00FF00','#0000FF','#FFFF00','#00FFFF','#FF00FF'];    //设置饼图颜色
        var credits =  {
            enabled: false    //禁用版权url    此处不设置，  会显示highecharts.com
        };
        var plotOptions = {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                depth: 35, //饼图厚度
               // color:pieColors,
                dataLabels: {
                    distance: 30,//设置引导线的长度
                   // color:'red',//全局设置字体颜色
                    enabled: true,
                   // format: '{point.name}',
                    formatter: function() {     //设置字体与引导线和饼图颜色一致
                        if(this.point.name == '中国'){
                            return '<span style="color:#FF0000">['+ this.point.name +' '+ Highcharts.numberFormat(this.percentage, 2)+'%]</span>';
                        }else if(this.point.name == '美国'){
                            return '<span style="color:#00FF00">['+ this.point.name +' '+ Highcharts.numberFormat(this.percentage, 2)+'%]</span>';
                        }else if(this.point.name == '俄罗斯'){
                            return '<span style="color:#0000FF">['+ this.point.name +' '+Highcharts.numberFormat(this.percentage, 2)+'%]</span>';
                        }else if(this.point.name == '英国'){
                            return '<span style="color:#FFFF00">['+ this.point.name +' '+ Highcharts.numberFormat(this.percentage, 2)+'%]</span>';
                        }else if(this.point.name == '朝鲜'){
                            return '<span style="color:#00FFFF">['+ this.point.name +' '+ Highcharts.numberFormat(this.percentage, 2)+'%]</span>';
                        }else if(this.point.name == '日本'){
                            return '<span style="color:#FF00FF">['+ this.point.name +' '+ Highcharts.numberFormat(this.percentage, 2)+'%]</span>';
                        }
                    }
                   /* style: {
                        fontSize: '10px',//设置字体大小
                        fontFamily: 'Verdana, sans-serif'
                    }*/
                }
            }

        };
        var series= [{
            type: 'pie',
            name: 'Browser share',
            startAngle: 180,//调整饼图的角度   方向：顺时针
            data: [
                ['中国',   45.0],
                ['美国',       16.8],
                {
                    name: '俄罗斯',
                    y: 22.8,
                    sliced: true,
                    selected: true
                },
                ['英国',    8.5],
                ['朝鲜',     6.2],
                ['日本',   0.1]
            ]
        }];

        var json = {};
        json.chart = chart;
        json.title = title;
        json.tooltip = tooltip;
        json.colors = colors;   // 设置饼图颜色
        json.credits = credits;
        json.plotOptions = plotOptions;
        json.series = series;
        $('#container').highcharts(json);
    });
</script>
</body>
</html>