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

问题描述 投票:0回答:1

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

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

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() {
  }

}

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

enter image description here

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

我有一个甜甜圈图表,可以在数据标签中显示名称,但是我需要在数据标签中显示数字。我该如何实现?我的有角打字稿甜甜圈highchart:-import {Component,...

angular typescript highcharts
1个回答
0
投票

在解析数据之前将数字应用于标签怎么办?

© www.soinside.com 2019 - 2024. All rights reserved.