ChartJS 仅当标签值>0时显示数据标签

czfnxgou  于 2022-11-07  发布在  Chart.js
关注(0)|答案(2)|浏览(249)

我有一个关于ng2图表的问题。这是我的组件.ts文件。

  1. public barChartOptions: ChartConfiguration['options'] = {
  2. responsive: true,
  3. // We use these empty structures as placeholders for dynamic theming.
  4. scales: {
  5. x: {},
  6. y: {
  7. min: 10
  8. }
  9. },
  10. plugins: {
  11. legend: {
  12. display: true,
  13. },
  14. datalabels: {
  15. anchor: 'center',
  16. align: 'center'
  17. }
  18. }
  19. };
  20. public barChartType: ChartType = 'bar';
  21. public barChartPlugins = [
  22. DataLabelsPlugin
  23. ];
  24. public barChartData: ChartData<'bar'> = {
  25. labels: [ '2006', '2007', '2008', '2009', '2010', '2011', '2012' ],
  26. datasets: [
  27. { data: [ 65, 59, 80, 81, 56, 55, 40 ], label: 'Series A' , stack: 'a',},
  28. { data: [ 28, 48, 40, 19, 86, 27, 90 ], label: 'Series B' , stack: 'a',},
  29. { data: [ 28, 48, 0, 19, 86, 27, 90 ], label: 'Series C', stack: 'a', },
  30. { data: [ 28, 0, 90, 79, 66, 7, 9 ], label: 'Series D', stack: 'a', },
  31. ]
  32. };
  33. public randomize(): void {
  34. // Only Change 3 values
  35. this.barChartData.datasets[0].data = [
  36. Math.round(Math.random() * 100),
  37. 59,
  38. 80,
  39. Math.round(Math.random() * 100),
  40. 56,
  41. Math.round(Math.random() * 100),
  42. 40 ];
  43. }

这是我的component.html文件

  1. <div>
  2. <div>
  3. <div style="display: block">
  4. <canvas baseChart
  5. [data]="barChartData"
  6. [options]="barChartOptions"
  7. [plugins]="barChartPlugins"
  8. [type]="barChartType">
  9. </canvas>
  10. </div>
  11. <button mat-button mat-raised-button color="primary" (click)="randomize()">Update</button>
  12. </div>
  13. </div>

这就是ng2 chart的外观
我希望,只有当值为而不是0时,才会显示这些值。如果我设置

  1. datalabels: {
  2. anchor: 'end',
  3. align: 'end'
  4. }

但如果我用中心的话,我也想工作。
先谢谢你
干杯
大卫

rt4zxlrg

rt4zxlrg1#

我找到了解决办法:

  1. datalabels: {
  2. anchor: 'center',
  3. align: 'center',
  4. display: function(context) {
  5. return context.dataset.data[context.dataIndex]! >= 6; // or >= 1 or ...
  6. }
  7. }
svujldwt

svujldwt2#

你可以使用formatter函数,如果值大于0则返回它,否则返回一个空字符串:
第一个

相关问题