highcharts制作平面饼图的代码详解

最新推荐文章于 2024-09-03 16:53:53 发布

原创最新推荐文章于 2024-09-03 16:53:53 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#highcharts

highcharts 专栏收录该内容

1 篇文章

订阅专栏

本文通过实例演示了如何使用Highcharts JavaScript库创建一个基础饼图，并详细解释了配置项的意义，帮助读者理解并掌握Highcharts的基本用法。

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

Highcharts是一个用javascript编写的一个图表库，与echarts有诸多相同和不同之处。在此，不一一介绍echarts与highcharts的异同。今天，用highcharts制作了一个基础饼图。虽然官方有代码示例。但是我还是认为，不光要实现效果，还要深入研究，知道每个标签的含义可以提升我们写代码的速度和水平。
首先贴出代码：

$("#div1").highcharts({
            chart: {//关于图表区和图形区的参数及一般图表通用参数。
                backgroundColor: '#EDEDED'//设置饼图的背景颜色
            },
            title: {//饼图标题
                text: "一次设备类型",//标题文字
                style: {//标题样式
                    fontSize: 16,//字体大小
                    color: '#000',//字体颜色为黑色
                    fontWeight: 'bold',//标题加粗
                    fontFamily: '黑体'// 主标题文字颜色
                }
            },
            tooltip: {//数据提示框
                pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'//格式化回调函数，当鼠标移入时，显示该区域的名字及占比
            },
            exporting: {//此处是不显示右上角导出工具按钮
                enabled:false
            },
           /* colors:['#C33531','#EFE42A','#64BD3D','#EE9201','#29AAE3'],//自定义颜色数组。如果不定义则显示官方默认的颜色*/
            plotOptions: {//数据列配置
                pie: {//饼图
                    allowPointSelect: true,//是否允许选中点。可选true或者false
                    cursor: 'pointer',//光标形状为手型
                    dataLabels: {//数据标签
                        enabled: true,//是否显示数据标签
                        style:{//数据标签样式
                            fontSize: 12,//字体大小
                            color: '#000',//字体颜色
                            fontWeight: 'normal',//字体加粗样式
                            fontFamily: '微软雅黑'//字体
                        },
                        format: '<b>{point.name}</b>: {point.percentage:.1f} %'//数据标签如何显示
                    }
                }
            },
            series: [{//数据列
                type: 'pie',//图表类型
                name: '占比',
                data: [["主变",123],["变压器",68],["线路",1568],["母线",168],["其他",1568]]//数据
            }]
        });