使用Highcharts饼图

使用Highcharts饼图实现:标签过长则遇空格换行,格式为 名称:百分比
核心代码:

dataLabels: {
                    enabled: true,
                    // 通过 format 或 formatter 来格式化数据标签显示
                    //format: '值: {point.y} 占比 {point.percentage} %',
                    useHTML: true,
                    connectorPadding: 5,
                    formatter: function(){
                        return "<p style='width:100px; display:inline-block; white-space:pre-wrap;'><b>"+this.point.name+"</b>:"+this.percentage.toFixed(2)+"%</p>"
                    }
                },

最后效果:


饼图效果.png
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 浏览器与服务器的基本概念 浏览器(安装在电脑里面的一个软件) 作用: ①将网页内容渲染呈现给用户查看。 ②让用户通...
    云还灬阅读 1,167评论 0 0
  • 概述 在网易云课堂学习李南江老师的《从零玩转HTML5前端+跨平台开发》时,所整理的笔记。笔记内容为根据个人需求所...
    墨荀阅读 2,395评论 0 7
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,879评论 1 45
  • ORA-00001: 违反唯一约束条件 (.) 错误说明:当在唯一索引所对应的列上键入重复值时,会触发此异常。 O...
    我想起个好名字阅读 5,484评论 0 9
  • 哥和嫂子在老家一个小县城的商场里卖鞋。 一天,初中同学W和另一名同学去嫂子那逛街。同学问W,知道这是谁吗?W说,当...
    一朵幽莲阅读 534评论 0 1