Highcharts 饼图相关设置

var data = [A:10,B:20,C:25,D:25,E:10,F:10] //已经算好的百分比数值
//var data = [A:20,B:30,C:25,D:25,E:40,F:10] 原始数值让Highcharts自动算出百分比
function renderTypeChart(data) {
    if(data.length == 0){
      $('#typeChart').find('.no-data').show() //无数据时显示的提示
    } else {
      $('#typeChart').find('.no-data').hide();
      Highcharts.chart('typeChart', {
        chart: {
          plotBackgroundColor: null,
          plotBorderWidth: 0,
          plotShadow: false,
          backgroundColor: 'none'
        },
        title: {
          text: '',
          align: 'center',
          verticalAlign: 'middle'
        },
        credits: { // 隐藏版权
          enabled: false
        },
        exporting: { // 隐藏导出功能
          enabled: false
        },
        tooltip: { 

          headerFormat: '<span style="font-size:10px; color: #f55c76; font-size: 14px; font-weight: bold;">{point.key}</span><table>',
          pointFormat: '<tr><td style="color:#b7b7b7;padding:0">{series.name}: </td></tr>' +
          '<tr><td style="padding:0; font-size: 18px; color: #000; font-weight: bold;">{point.y}%</td> </tr>',//data不是算好的百分比数据 则为{point.percentage:.2f}% 保留两位小数
          footerFormat: '</table>',
          shared: true,
          useHTML: true,
          backgroundColor: '#fff',
          borderWidth: 1,
          borderRadius: 8,
          borderColor: '#fff'
        },
        plotOptions: {
          pie: {
            borderWidth: 0,
            dataLabels: {
              enabled: true,
              distance: -50,
              style: {
                fontWeight: 'bold',
                color: 'white'
              }
            },
            center: ['30%', '60%'],
            size: '75%',
            showInLegend: true
          }
        },
        legend: {
          align: 'right',
          width: 150,
          floating: true,
          verticalAlign: 'middle',
          y: 20,
          maxHeight:208,
          symbolWidth: 6,//标志宽
          symbolHeight: 6,//标志高
          itemStyle: {"color": "#333333", "cursor": "pointer", "fontSize": "12px", "fontWeight": "normal"},
          labelFormatter: function () {
            return this.name + '<span style="color:#AEAEAE"> (' + this.y + '%)</span>';//在图例项名称后面追加百分比数据,如果data数据不是百分比则为this.percentage.toFix(2)
          },
          navigation: {
            activeColor: '#2c90c7',
            animation: true,
            arrowSize: 10,
            inactiveColor: '#CCC',
            style: {
              fontWeight: 'bold',
              color: '#333',
              fontSize: '12px'
            }
          }
        },
        series: [{
          type: 'pie',
          name: '数据比重',
          innerSize: '50%', // 内环半径大小
          allowPointSelect: true,
          cursor: 'pointer',
          dataLabels: {
            enabled: false
          },
          data: data,
          colors: ['#9a9cff', '#f384ae', '#3dacea', '#ff989b', '#2c90c7', '#febb37', '#6ac6cd', '#ea6966', '#3fc4b0', '#fcb88b', '#50e29d','#9a9cfe', '#f384aa', '#3dacca', '#ff989d', '#2c90c6', '#febb39', '#6ac66b', '#ea6968', '#3fc4b2', '#fcb88f',]
        }]
      });
    }

  }
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值