如何删除 ng2-chart 条形图中条形顶部的百分比计算

Question

我正在尝试在 angular 5 中使用 ng2-chart 创建条形图。它创建得很好，但我想我缺少一些配置，因此我在最大 2 个条形图之上进行百分比计算.我想删除这些百分比

我在 package.json 中使用 ng2-charts(1.6.0)，chart.js(2.7.2)。我已尝试在 chartjs.org 上为条形图提供配置，但无法删除这些条形的百分比计算。在html

<canvas baseChart
    height='260px'
    [datasets]="barChartData"
    [labels]="barChartLabels"
    [options]="barChartOptions"
    [colors]="chartColors"
    [legend]= "false"
    [chartType]="barChartType">
</canvas>

在组件中

public barChartType: ChartType = 'bar';
public barChartOptions: ChartOptions = {
    responsive: true,
    scales: { xAxes: [{}], yAxes: [{ticks: {beginAtZero: true}}] },
    plugins: { datalabels: { anchor: 'end', align: 'end', } }
};

public barChartData = [ { data: [7,4,1,5,3,1,2,1]} ],
public barChartLabels = ['25/03','26/03','27/03','28/03','29/03','30/03','31/03','01/04','02/04',],
public chartColors = [ {backgroundColor: '#fa9cb0'} ]

我想要简单的条形图，上面没有那些随机百分比。仅供参考，它的价值很小。对于

这样的值

[12,22,34,53,65,73,23,45]

没问题。

请告诉我，我怎样才能从栏的顶部删除这些百分比。我还需要使用其他配置吗？？

Answer 1

我进一步查看了这个问题，发现在我的项目中创建了全局插件，它在没有任何可配置的情况下针对每种类型的图表错误地实施属性。

Chart.plugins.register({ // plugin implementation });

参考这个linkChartJs Plugin

Answer 2

您可以使用插件：'chartjs-plugin-labels' 来解决问题，这里是将插件添加到您的 Angular 项目的信息：

https://emn178.github.io/chartjs-plugin-labels/

在项目中安装插件后，您必须使用以下代码片段将库添加到图表的 .ts 文件中：

import 'chartjs-plugin-labels';

并在插件变量部分也添加此代码：

 labels: {
  render: false
}

Answer 3

需要导入 ChartDataLabels 然后取消注册 'ChartDataLabels' 插件

import ChartDataLabels from 'chartjs-plugin-datalabels';

Chart.plugins.unregister(ChartDataLabels);  // on ngAfterViewInit

如何删除 ng2-chart 条形图中条形顶部的百分比计算

How to remove percentage calculation on top of bar in ng2-chart bar chart

chart.js

ng2-charts

angular5