如何使用 Angular 中的 chart.js 条形图在标签之后和数值之前显示符号

Question

我在我的 Angular 项目中使用 chart.js v2 来呈现条形图并尝试以以下格式显示工具提示 （所需输出） 在每个栏上。例子： 其他：34.5 美元（不含商品及服务税）。 我尝试了 labelBefor 和 LabelAfter callbacks 但问题仍然存在。

实测见下图！

代码：

loadChart() {
    
        if (Array.isArray(this.monthData)) {
            for (let i = 0; i < this.monthData.length; i++) {
                this.CCA_DollarClr.push('#BD4FBD');
                this.APT_DollarClr.push('#4F77BD');
                this.CW_DollarClr.push('lightgrey');
                this.SPRA_DollarClr.push('red');
                this.OTHER_DollarClr.push('lightgreen');
            }
        }

        if (this.BarChart) {
            this.BarChart.destroy();
        }


        // Bar chart:
        this.BarChart = new Chart('barChart', {
            type: 'bar',
            data: {
                labels: this.monthData,
                datasets: [{
                    label: 'CCA',
                    data: this.CCA_Dollar,
                    
                    backgroundColor: this.CCA_DollarClr,
                    borderColor: ['#BD4FBD', '#BD4FBD', '#BD4FBD', '#BD4FBD', '#BD4FBD', '#BD4FBD'],
                    borderWidth: 1
                },
                {
                    label: 'APT',
                    data: this.APT_Dollar,
                    backgroundColor: this.APT_DollarClr,
                    borderColor: ['#4F77BD', '#4F77BD', '#4F77BD'],
                    borderWidth: 1
                },
                {
                    label: 'CW',
                    data: this.CW_Dollar,
                    backgroundColor: this.CW_DollarClr,
                    borderColor: ['lightgrey', 'lightgrey', 'lightgrey'],
                    borderWidth: 1
                },
                {
                    label: 'SPRA',
                    data: this.SPRA_Dollar,
                    backgroundColor: this.SPRA_DollarClr,
                    borderColor: ['#4F77BD', '#4F77BD', '#4F77BD'],
                    borderWidth: 1
                },
                {
                    label: 'OTHER',
                    data: this.OTHER_Dollar,
                    backgroundColor: this.OTHER_DollarClr,
                    borderColor: ['lightgrey', 'lightgrey', 'lightgrey'],
                    borderWidth: 1
                }
                ],
            },
            options: {
                title: {
                    // text: "Product Usage",
                    display: true
                },
                scales: {
                    xAxes: [{
                        gridLines: {
                            display:false
                        }
                    }],
                    yAxes: [{
                        gridLines: {
                            display:false
                        }   
                    }]
                },
                legend: {
                    onHover: function (e) {
                        e.target['style'].cursor = 'pointer';
                    }
                },
                hover: {
                    onHover: function (e) {
                        var point = this.getElementAtEvent(e);
                        if (point.length) e.target['style'].cursor = 'pointer';
                        else e.target['style'].cursor = 'default';
                    }
                },
                tooltips: {
                    // mode: 'index',
                    // callbacks: {
                    //  afterLabel: function() {
                    //      return ' $ (ex GST)';
                    //  }
                    // }
                    
                    
                }
            }
        });
    }

有没有一种方法可以设置工具提示的格式，以便我可以在中间、开头和结尾放置字符？如果我使用 beforLable，它输出为 $ (ext GST) Others: 3.45 这不是解决方案。任何指导都将非常适用

Answer 1

您将需要使用正常的标签回调。

方法应该看起来像这样（在移动设备上所以无法测试所以从头开始这样做）：

callbacks: {
  label: (ttItem, data) => {
    return `${data.datasets[ttItem.datasetIndex].label}: £${ttItem.yLabel}`
  }
}

Answer 2

callbacks: {                            
                        label: (item, data) => {
                            return `${data.datasets[item.datasetIndex].label}: $ ${item.value} (YourText)`;
                      }

我想你需要这个，请试一试。

如何使用 Angular 中的 chart.js 条形图在标签之后和数值之前显示符号

How to show symbols after the label and before the numeric value using chart.js Bar chart in Angular

angular

chart.js

tooltip

bar-chart