如何在Angular中使用chart.js條形圖在標簽后和數值前顯示符號

我在我的Angular專案中使用chart.js v2來渲染柱狀圖，并試圖在每個柱狀圖上以下列格式顯示工具提示（所需輸出）。 例如。 其他：34.5美元（不含消費稅）。 我已經嘗試了labelBefor和LabelAfter回呼，但問題仍然存在。

實際的輸出結果附在下面的圖片中!

代碼：

loadChart() {
    
        如果(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()。
        }


        // 柱狀圖。
        this.BarChart = new Chart('barChart', {
            type: 'bar',
            資料。{
                labels: this.monthData,
                資料集。[{
                    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
                }
                ],
            },
            選項。{
                標題。{
                    // 文本。"產品用途"。
                    顯示: true
                },
                規模。{
                    xAxes: [{
                        gridLines: {
                            display:false
                        }
                    }],
                    yAxes: [{
                        gridLines: {
                            display:false
                        }   
                    }]
                },
                圖例。{
                    onHover: function (e) {
                        e.target['style'].cursor = 'pointer';
                    }
                },
                懸停。{
                    onHover: function (e) {
                        var point = this.getElementAtEvent(e);
                        如果（point.length）e.target['style'].cursor = 'pointer';
                        否則e.target['style'].cursor = 'default';
                    }
                },
                tooltips: {
                    // mode: 'index',
                    // callbacks: {
                    // afterLabel: function() {
                    // 回傳 ' $ (ex GST)' 。
                    // }
                    // }
                    
                    
                }
            }
        });
    }

有什么方法可以使工具提示的格式化，以便我可以在中間、開始和結尾處放置字符？如果我使用beforLable，它輸出為$(ext GST) Others。3.45，這并不是解決辦法。 如果有任何指導意見，我們將非常感激

uj5u.com熱心網友回復：

你將需要使用正常的標簽回呼。

方法應該是這樣的（在手機上，所以不能測驗，所以從我的頭頂上做這個）：

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

uj5u.com熱心網友回復：

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

我想你需要這個，請試一下。

標籤：

上一篇：在Angular中，是否有更好的方法將一個值推送到一個以陣列為值的表單控制元件中？

下一篇：如何用0%替換NULL%