ng2-chart:如何在图表内显示百分比值?
ng2-chart: How to show percentage values inside the chart?
我已经用谷歌搜索了几个小时,但还没有找到答案。我正在使用 ng2-chart 在我的仪表板中生成图表。它运行良好,问题是我想在圆环图中显示百分比值,但我不知道该怎么做。
这是我的代码:
<canvas baseChart [data]="dashboard.graficoDespesaMensal.valorTotalDespesa"
[labels]="dashboard.graficoDespesaMensal.descricaoCategoria" [options]="optionsGraficoDespesa"
[chartType]="'doughnut'">
</canvas>
optionsGraficoDespesa: ChartOptions = {
responsive: true,
tooltips: {
enabled: true,
callbacks: {
label: function (tooltipItem, data) {
let label = data.labels[tooltipItem.index];
let count: any = data
.datasets[tooltipItem.datasetIndex]
.data[tooltipItem.index];
return label + ": " + new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(count);
},
},
},
plugins: {
datalabels: {
formatter: (value, ctx) => {
let sum = 0;
let dataArr = ctx.chart.data.datasets[0].data;
dataArr.map(data => {
sum += data;
});
let percentage = (value * 100 / sum).toFixed(2) + "%";
return percentage;
},
color: '#fff',
}
}
};
结果是:
不幸的是,我在 [options] 输入中使用的插件无法正常工作。我该如何解决这个问题?
我通过执行以下操作解决了这个问题:
npm i chartjs-plugin-datalabels
组件:
import * as pluginDataLabels from 'chartjs-plugin-datalabels';
public chartPlugins = [pluginDataLabels];
optionsGraficoDespesa: ChartOptions = {
responsive: true,
tooltips: {
enabled: true,
callbacks: {
label: function (tooltipItem, data) {
let label = data.labels[tooltipItem.index];
let count: any = data
.datasets[tooltipItem.datasetIndex]
.data[tooltipItem.index];
return label + ": " + new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(count);
},
},
},
plugins: {
datalabels: {
formatter: (value, ctx) => {
let sum = 0;
let dataArr: any[] = ctx.chart.data.datasets[0].data;
dataArr.map((data: number) => {
sum += data;
});
let percentage = (value * 100 / sum).toFixed(2) + "%";
return percentage;
},
color: '#fff',
}
}
};
HTML
<canvas baseChart data]="dashboard.graficoDespesaMensal.valorTotalDespesa"
[labels]="dashboard.graficoDespesaMensal.descricaoCategoria" [options]="optionsGraficoDespesa" [plugins]="chartPlugins"[chartType]="'doughnut'">
结果:
安装:
npm install chartjs-plugin-labels
将此添加到您的 component.ts 文件中:
import 'chartjs-plugin-labels';
在您的图表选项中,添加:
plugins: {
labels: {
render: 'percentage',
fontColor: 'white',
fontSize: 10,
},
},
我已经用谷歌搜索了几个小时,但还没有找到答案。我正在使用 ng2-chart 在我的仪表板中生成图表。它运行良好,问题是我想在圆环图中显示百分比值,但我不知道该怎么做。
这是我的代码:
<canvas baseChart [data]="dashboard.graficoDespesaMensal.valorTotalDespesa"
[labels]="dashboard.graficoDespesaMensal.descricaoCategoria" [options]="optionsGraficoDespesa"
[chartType]="'doughnut'">
</canvas>
optionsGraficoDespesa: ChartOptions = {
responsive: true,
tooltips: {
enabled: true,
callbacks: {
label: function (tooltipItem, data) {
let label = data.labels[tooltipItem.index];
let count: any = data
.datasets[tooltipItem.datasetIndex]
.data[tooltipItem.index];
return label + ": " + new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(count);
},
},
},
plugins: {
datalabels: {
formatter: (value, ctx) => {
let sum = 0;
let dataArr = ctx.chart.data.datasets[0].data;
dataArr.map(data => {
sum += data;
});
let percentage = (value * 100 / sum).toFixed(2) + "%";
return percentage;
},
color: '#fff',
}
}
};
结果是:
不幸的是,我在 [options] 输入中使用的插件无法正常工作。我该如何解决这个问题?
我通过执行以下操作解决了这个问题:
npm i chartjs-plugin-datalabels
组件:
import * as pluginDataLabels from 'chartjs-plugin-datalabels';
public chartPlugins = [pluginDataLabels];
optionsGraficoDespesa: ChartOptions = {
responsive: true,
tooltips: {
enabled: true,
callbacks: {
label: function (tooltipItem, data) {
let label = data.labels[tooltipItem.index];
let count: any = data
.datasets[tooltipItem.datasetIndex]
.data[tooltipItem.index];
return label + ": " + new Intl.NumberFormat('pt-BR', { style: 'currency', currency: 'BRL' }).format(count);
},
},
},
plugins: {
datalabels: {
formatter: (value, ctx) => {
let sum = 0;
let dataArr: any[] = ctx.chart.data.datasets[0].data;
dataArr.map((data: number) => {
sum += data;
});
let percentage = (value * 100 / sum).toFixed(2) + "%";
return percentage;
},
color: '#fff',
}
}
};
HTML
<canvas baseChart data]="dashboard.graficoDespesaMensal.valorTotalDespesa"
[labels]="dashboard.graficoDespesaMensal.descricaoCategoria" [options]="optionsGraficoDespesa" [plugins]="chartPlugins"[chartType]="'doughnut'">
结果:
安装:
npm install chartjs-plugin-labels
将此添加到您的 component.ts 文件中:
import 'chartjs-plugin-labels';
在您的图表选项中,添加:
plugins: {
labels: {
render: 'percentage',
fontColor: 'white',
fontSize: 10,
},
},