始终在 Angular 5 中显示圆环图工具提示

Posted 2023-03-13

【中文标题】始终在 Angular 5 中显示圆环图工具提示

【英文标题】：Always show doughnut Chart tooltip in Angular 5

【发布时间】：2018-12-23 18:14:11

【问题描述】：

我需要始终显示圆环图的工具提示，所以我需要添加以下内容：

Chart.pluginService.register(
  beforeRender: function(chart) 
  if (chart.config.options.showAllTooltips) 
    // create an array of tooltips
    // we can't use the chart tooltip because there is only one tooltip per chart
    chart.pluginTooltips = [];
    chart.config.data.datasets.forEach(function(dataset, i) 
    chart.getDatasetMeta(i).data.forEach(function(sector, j) 
      chart.pluginTooltips.push(new Chart.Tooltip(
        _chart: chart.chart,
        _chartInstance: chart,
        _data: chart.data,
        _options: chart.options.tooltips,
        _active: [sector]
      , chart));
    );
  );

  // turn off normal tooltips
  chart.options.tooltips.enabled = false;

,
afterDraw: function(chart, easing) 
if (chart.config.options.showAllTooltips) 
  // we don't want the permanent tooltips to animate, so don't do anything till the animation runs atleast once
  if (!chart.allTooltipsOnce) 
    if (easing !== 1)
      return;
    chart.allTooltipsOnce = true;
  

  // turn on tooltips
  chart.options.tooltips.enabled = true;
  Chart.helpers.each(chart.pluginTooltips, function(tooltip) 
    tooltip.initialize();
    tooltip.update();
    // we don't actually need this since we are not animating tooltips
    tooltip.pivot();
    tooltip.transition(easing).draw();
  );
  chart.options.tooltips.enabled = false;


);

https://jsfiddle.net/suhaibjanjua/qz3es03j/

在 Angular 5 中，我真的不知道如何在 component.ts 中翻译该代码。 我还需要为每个工具提示添加一个小的黑色边框。我知道如何在 CSS 中做到这一点，但我不知道如何将其添加到图表工具提示中。

这是我当前的 component.ts 代码：

doughnutChartData: any[] = [0,18,26,16, 40];
doughnutChartLabels: any[] = ['NA', 'NE', 'NO', 'C', 'S'];
doughnutChartOptions: any = 
  responsive: true,
  maintainAspectRatio: false,
  cutoutPercentage: 80,
  tooltips: 
    enabled: true,
    backgroundColor: 'white',
    titleFontColor: 'black',
    bodyFontColor: 'black',
    xPadding: 20,
    yPadding: 20,
    displayColors: false,
    callbacks: 
            label: function(tooltipItem, data) 
                var allData = data.datasets[tooltipItem.datasetIndex].data;
                var tooltipLabel = data.labels[tooltipItem.index];
                var tooltipData = allData[tooltipItem.index];
                var total = 0;
                for (var i in allData) 
                    total += allData[i];
                
                var tooltipPercentage = Math.round((tooltipData / total) * 100);
                return tooltipLabel + ': ' + tooltipPercentage + '%';
            
        
  
;
doughnutChartColors: any[] = [
  borderWidth: 3,
  backgroundColor: ['#ffffff', '#e827d3', 'black', 'rgb(104, 104, 104)', 'gray']
];

还有html：

<mat-card class="charts-npls first-chart">
  <canvas baseChart
                [data]="doughnutChartData"
                [labels]="doughnutChartLabels"
                [options]="doughnutChartOptions"
                [colors]="doughnutChartColors"
                [legend]="false"
                chartType="doughnut">
   </canvas>
</mat-card>

【参考方案1】：

好的，我可以通过以下示例找到答案： https://embed.plnkr.co/opFmFg34AyqVwgvdda0Z?show=preview

declare var Chart: any;

ngOnInit() : void
Chart.pluginService.register(
    beforeDraw: (chart) => 
    if (chart.config.options.showAllTooltips) 
      // create an array of tooltips
      // we can't use the chart tooltip because there is only one tooltip per chart
      chart.pluginTooltips = [];
      chart.config.data.datasets.forEach(function(dataset, i) 
        chart.getDatasetMeta(i).data.forEach(function(sector, j) 
          chart.pluginTooltips.push(new Chart.Tooltip(
            _chart: chart.chart,
            _chartInstance: chart,
            _data: chart.data,
            _options: chart.options.tooltips,
            _active: [sector]
          , chart));
        );
      );

      // turn off normal tooltips
      chart.options.tooltips.enabled = false;
    
  ,
  afterDraw: (chart, easing) => 
    if (chart.config.options.showAllTooltips) 
      // we don't want the permanent tooltips to animate, so don't do anything till the animation runs atleast once
      if (!chart.allTooltipsOnce) 
        if (easing !== 1)
          return;
        chart.allTooltipsOnce = true;
      

      // turn on tooltips
      chart.options.tooltips.enabled = true;
      Chart.helpers.each(chart.pluginTooltips, function(tooltip) 
        tooltip.initialize();
        tooltip.update();
        // we don't actually need this since we are not animating tooltips
        tooltip.pivot();
        tooltip.transition(easing).draw();
      );
      chart.options.tooltips.enabled = false;
    
  
);

我补充说：

showAllTooltips: true,

到 donutChartOptions

好的，要为工具提示添加边框，只需添加：

borderColor: 'rgba(0,0,0,1)',
borderWidth: 1,
caretSize: 0,

carterSize 0 也会移除carter，这样你就会得到一个漂亮的矩形。