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]
          ]
        }]
      });
    });

    效果图:

  • 相关阅读:
    ajax方法参数详解与$.each()和jquery里面each方法的区别
    Struts2框架里面action与前端jsp页面进行交互路径问题---》一个对话框里面有很多超链接,进行相应的跳转
    Struts2框架action路径问题心得----》页面url请求怎么找action
    Mybatis映射.xml文件报错
    MyBatis框架流程
    Struts2框架action层学习心得体会
    动态sql语句和动态传入参数个数
    String,数组,list集合长度的使用
    ResourceBundle和Locale
    linux编译内核
  • 原文地址:https://www.cnblogs.com/jinglover/p/5896372.html
Copyright © 2011-2022 走看看