在Highcharts中,可以通过使用formatter函数来自定义饼图的数据标签和图例。下面是一个示例代码,演示如何在饼图上显示占比,并在图例中显示数量:

Highcharts.chart('container', {
  chart: {
    type: 'pie'
  },
  title: {
    text: '饼图示例'
  },
  tooltip: {
    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
  },
  plotOptions: {
    pie: {
      allowPointSelect: true,
      cursor: 'pointer',
      dataLabels: {
        enabled: true,
        formatter: function() {
          // 显示占比
          return '<b>' + this.point.name + '</b>: ' + Highcharts.numberFormat(this.y / this.total * 100, 1) + '%';
        }
      }
    }
  },
  series: [{
    name: '数量',
    colorByPoint: true,
    data: [{
      name: '项目1',
      y: 5
    }, {
      name: '项目2',
      y: 10
    }, {
      name: '项目3',
      y: 15
    }]
  }],
  legend: {
    labelFormatter: function() {
      // 在图例中显示数量
      return this.name + ': ' + this.y;
    }
  }
});

在上述代码中,plotOptions.pie.dataLabels.formatter函数用于自定义饼图上的数据标签,它将显示每个项目的名称和占比。legend.labelFormatter函数用于自定义图例中的标签,它将显示每个项目的名称和数量。

注意,以上代码中使用的是Highcharts的JavaScript库,需要将它引入到页面中才能正常运行

highcharts如何饼图上显示占比图例中显示数量

原文地址: https://www.cveoy.top/t/topic/hWfG 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录