highecharts 3d饼图,引线文字

本文介绍如何使用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>
 

 

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值