设置饼图对应的提示文字的颜色与饼图块状一样,demo如下:

$(function () {
  $('#container').highcharts({
  chart: {
    plotBackgroundColor: null,
    plotBorderWidth: null,
    plotShadow: false
  },
  title: {
    text: '各练案等级分布'
  },
  tooltip: {
    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
  },

  colors:['#4dd3b9','#fdd67f','#ffaca8','#64bcec'],
  credits: {
    enabled: false
  },

  plotOptions: {

    pie: {
      allowPointSelect: true,
      cursor: 'pointer',
      format: '<b>{point.name}</b>: {point.percentage:.1f} %',
      dataLabels: {
        enabled: true,
        formatter: function() {
        if(this.point.name == '初级'){
          return '<span style="color:#4dd3b9">['+ this.point.name +' '+ Highcharts.numberFormat(this.percentage, 2)+'%]</span>';
        }else if(this.point.name == '中级'){
          return '<span style="color:#fdd67f">['+ this.point.name +' '+ Highcharts.numberFormat(this.percentage, 2)+'%]</span>';
        }else if(this.point.name == '高级'){
          return '<span style="color:#ffaca8">['+ this.point.name +' '+Highcharts.numberFormat(this.percentage, 2)+'%]</span>';
        }else if(this.point.name == '不分等级'){
          return '<span style="color:#64bcec">['+ this.point.name +' '+ Highcharts.numberFormat(this.percentage, 2)+'%]</span>';
          }
        }
      }
    }
  },
  series: [{
    type: 'pie',
    name: '占比',
    data: [
        ['初级', 46],
        ['中级', 29],
        ['高级', 15],
        ['不分等级',39]
      ]
    }]
  });
});

效果图:

Highcharts 饼图 文字颜色设置的更多相关文章

  1. iOS不得姐项目--登录模块的布局,设置文本框占位文字颜色,自定义内部控件竖直排列的按钮

    一.登录模块的布局 将一整部分切割成若干部分来完成,如图分成了三部分来完成 设置顶部状态栏为白色的方法 二.设置文本框占位文字颜色 <1>方法一与方法二实现原理是同一种,都是通过设置pla ...

  2. vc设置按钮文字颜色

    设置按钮文字颜色使用 CMFCBUTTON即可 在OnInitDialog函数加入如下内容即可 ((CMFCButton*)GetDlgItem(IDC_MFCBUTTON1))->SetTex ...

  3. 设置TabBarItem选中时的图片及文字颜色

    TabBarItem选中时,默认文字和图片都变为蓝色.使用以下代码可以进行修改. MainViewController *mainVC = [[MainViewController alloc] in ...

  4. HighCharts之2D颜色阶梯饼图

    HighCharts之2D颜色阶梯饼图 1.实例源码 PieGradient.html: <!DOCTYPE html> <html> <head> <met ...

  5. 设置LISTControl控件某一行的背景和文字颜色

    定义宏 用listcontrol的SetItemData设置某一行的属性,通过自定义属性标识实现. 自定义某行内容颜色属性: #define COLOR_DEFAULT 0 //默认颜色 #defin ...

  6. android TextView 设置部分文字背景色和文字颜色

    通过SpannableStringBuilder来实现,它就像html里边的元素改变指定文字的文字颜色或背景色 public class MainActivity extends Activity { ...

  7. android TextView 设置部分文字背景色 和 文字颜色

    通过SpannableStringBuilder来实现,它就像html里边的元素改变指定文字的文字颜色或背景色 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 ...

  8. 【Winform-GataGridView】根据DataGridView中的数据内容设置行的文字颜色、背景色 — 根据状态变色

    C#中可以根据每行内容的不同来对DataGridView数据表格控制每行的文字颜色.背景颜色进行不同的设置. 效果如下: 实现: 在DataGridView的RowPrePaint事件中进行行颜色控制 ...

  9. NumberPicker设置宽度,设置文字颜色

    修改宽度 wheel = (NumberPicker) findViewById(R.id.info_wheel_province); wheel.setLayoutParams(new Linear ...

随机推荐

  1. 查看Oracle中是否有锁表的sql

    1.查看是否有锁表的sql 代码如下: select 'blocker('||lb.sid||':'||sb.username||')-sql:'|| qb.sql_text blockers, 'w ...

  2. 初学 react | redux

    react | redux 一.安装 React Redux 依赖 React 0.14或更新版本 npm install --sava react-redux 你需要使用 npm 作为包管理工具,配 ...

  3. Openfire 集群探究_压测情况

    一.(测试时间:20151220 - 下午14:00-17:00) windows环境 第一次测试,运行中发现在eclipse环境下.4w个连接耗尽了约1G的内存. 另外:服务本来可用的,压测客户端强 ...

  4. Git远程操作

    Git远程操作 // */ // ]]>   Git远程操作 Table of Contents 1 Git远程命令概览 2 Git远程仓库与本地仓库的关系图 3 git clone 4 git ...

  5. C语言实现 二分查找数组中的Key值(递归和非递归)

    基本问题:使用二分查找的方式,对数组内的值进行匹配,如果成功,返回其下标,否则返回 -1.请使用递归和非递归两种方法说明. 非递归代码如下: #include <stdio.h> int ...

  6. break continue.

    1.break与continue.这两个关键字一般放在循环的花括号里面使用.break——结束整个循环.continue——结束本次循环,进入下次循环. 2.while循环 //初始条件 while( ...

  7. PoEdu - C++阶段班【Po学校】- 第3天

    引用 C中指针的功能强大,使用起来繁杂,因为指针要控制的东西太多:有指针的类型,指针的解引用,指针空间内的值,它本身是有空间的,有自己的地址等.指针也是强大的,比如:我们要在函数之内,修改方法之外的值 ...

  8. db2设置共享内存

    db2 UPDATE DBM CFG USING INSTANCE_MEMORY 5242880 IMMEDIATEdb2 UPDATE DBM CFG USING INSTANCE_MEMORY A ...

  9. 多线程Server client

    项目结构 项目设计 客户端同时大量请求服务端,服务端多线程处理连接,并发序列化获得客户端发送的数据,并做出处理. IClients package simple.socket; import java ...

  10. 结构化查询语言(SQL)数据类型

    简要描述一下结构化查询语言中的五种数据类型:字符型,文本型,数值型,逻辑型和日期型. 字符型 VARCHARVS CHAR VARCHAR型和CHAR型数据的这个差别是细微的,但是非常重要.他们都是用 ...