代码之家 › 专栏 › 技术社区 › LiefLayer

始终以角度5显示圆环图工具提示

angular-components chart.js angular5 typescript javascript

LiefLayer · 技术社区 · 8 年前

我需要始终显示甜甜圈图表的工具提示,因此需要添加以下内容:

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/

在Angular5中,我真的不知道如何在组件内部转换代码。我还需要在每个工具提示中添加一个小的黑色边框。我知道如何在css中做到这一点,但我不知道如何将其添加到图表工具提示中。

这是我当前的组件。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 回复 | 直到 8 年前

LiefLayer 8 年前

好吧,我可以用这个例子找到答案: 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,

到油炸圈饼选项

好的,要在工具提示中添加边框,只需添加:

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

carterSize 0还将删除carter,这样您将得到一个漂亮的矩形。