zoukankan      html  css  js  c++  java
  • Highcharts 饼图 文字颜色设置

    设置饼图对应的提示文字的颜色与饼图块状一样,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]
          ]
        }]
      });
    });

    效果图:

  • 相关阅读:
    LRU缓存机制的实现
    用docker配置mysql主从复制
    策略模式,以及最近用到的策略模式
    2021"MINIEYE杯"中超(7~10)补题
    2021"MINIEYE杯"中超(6)补题
    2021"MINIEYE杯"中超(5)补题
    2021"MINIEYE杯"中超(4)补题
    2021"MINIEYE杯"中超(3)补题
    2021暑期个人赛4补题 (待补充)
    2021暑期个人赛2补题 (待补充)
  • 原文地址:https://www.cnblogs.com/jinglover/p/5896372.html
Copyright © 2011-2022 走看看