Question

我有一个甜甜圈图表，可以在数据标签中显示名称，但我需要在数据标签中显示数字。我该如何实现？

我的角型打字稿甜甜圈高图：-

import { Component, OnInit, Input, AfterViewInit } from '@angular/core';
import * as highcharts from 'highcharts';

@Component({
  selector: 'shared-highcharts-donought',
  templateUrl: './highcharts-donought.component.html',
  styleUrls: ['./highcharts-donought.component.scss']
})
export class HighchartsDonoughtComponent implements OnInit, AfterViewInit {

  plotData: Array<object>;
  colorCodes = ['#f2bf5e', '#4bb0b8', '#536eb7'];
  @Input() chartID: string;
  @Input() set chartData(value: object) {
    this.modifyInput(value);
  }
  constructor() { }

  modifyInput(value) {
    if (Array.isArray(value)) {
      this.plotData = value.map((v: {label: string, value: string}, i) => {
        return {
          name: v.label,
          y: +v.value,
          color: this.colorCodes[i],
        };
      }, this);
      console.log('plot data looks like ', this.plotData);
    }
  }

  ngAfterViewInit() {
    this.renderChart(this.chartID);
  }

  renderChart(chartID) {
    highcharts.chart(chartID, {
      title: null,
      responsive: {
        rules: [{
            condition: {
                maxWidth: 500,
            },
            chartOptions: {
                legend: {
                    align: 'center',
                    verticalAlign: 'bottom',
                    layout: 'horizontal'

                }
            }
        }]
    },
      chart: {
        height: (9 / 13 * 100) + '%',
        type: 'pie',
        plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
      },
      credits: {
        enabled: false
      },
      plotOptions: {
        pie: {
          shadow: false,
        }
      },
      tooltip: {
        valueSuffix: 'hello',
        formatter: (val) => {
            return '<b>' + val['chart']['hoverPoint'].name + '</b><br/>: ' + val['chart']['hoverPoint'].percentage + ' %';
        }
    },
    series: [{
      type: 'pie',
      name: 'Feedback',
      data: [...this.plotData
      ],
      size: '100%',
      innerSize: '40%',
      showInLegend: false,
      dataLabels: {
          enabled: true,
          crop: false,
      }
    }],
    });
  }

  ngOnInit() {
  }

}

我想要数据标签中的数字（而不是百分比）。

在这里停留了很长时间。我不应该像工具提示一样进行操作。我尝试过但没有从我那里会获得数字价值。

Answer 1

您可以使用dataLabels.format属性来设置数据标签格式。您还可以在字符串中添加其他数据，例如单位。有关更多格式选项，请参考here。

尝试以下

dataLabels: {
  enabled: true,
  crop: false,
  format: '{y}'
}

要更精细地控制数据标签的格式，可以使用dataLabels.formatter。

Answer 2

在解析数据之前将值应用于标签该怎么办？

这个想法的结尾是：

CMake

应用于您的代码将是：

const name = `${data.label}: ${data.value}`;

如何在数据标签中显示数字甜甜圈高图

2 个答案:

在解析数据之前将值应用于标签该怎么办？