ChartJS將工具提示添加到分組條形圖

Question

我試圖使用ChartJS將歐元符號添加到我的分組條形圖的工具提示中。 剪斷：

tooltips: {
   mode: 'label',
   callbacks: {
      label: function(tooltipItem, data) {
         return data['datasets'][0]['data'][tooltipItem['index']] + '€';
      }
   }
}

此代碼適用於我的折線圖，但不適用於我的分組條形圖。 當我將鼠標懸停時，我希望我的條形圖看起來如下所示：

但是我的圖表中沒有歐元符號，只顯示其價值。 我究竟做錯了什么？

謝謝。

**編輯

所以我的全部選項如下所示：

options: {
            title: {
                display: true,
                text: 'Title',
            },
            scales: {
                yAxes: [{
                    scaleLabel: {
                        display: true,
                        labelString: 'Wert in €'
                    }
                }],
                xAxes: [{
                    scaleLabel: {
                        display: true,
                        labelString: 'Zeitintervall'
                    }
                }]
            },
            tooltips: {
                mode: 'label',
                    callbacks: {
                        label: function(tooltipItem, data) {
                            return data['datasets'][0]['data'][tooltipItem['index']] + '€';
                        }
                    }
            }
        }

一旦我移除了scales ，就會顯示歐元符號。 所以我現在的選擇如下：

options: {
            title: {
                display: true,
                text: 'Title'
            },
            tooltips: {
                mode: 'label',
                callbacks: {
                    label: function(tooltipItem, data) {
                        return data['datasets'][0]['data'][tooltipItem['index']] + ' €';
                    }
                }
            }
        }

但是現在我遇到了另一個問題，它顯示了兩個不同條形的相同值：

您可以清楚地看到值不一樣。 問題出在這里？

Answer 1

這可以使用以下工具提示標簽回調函數來實現：

tooltips: {
   mode: 'label',
   callbacks: {
      label: function(t, d) {
         var dstLabel = d.datasets[t.datasetIndex].label;
         var yLabel = t.yLabel;
         return dstLabel + ': ' + yLabel + ' €';
      }
   }
}

^{僅供參考：這與scales無關。 它可以與scales一起完美地工作}

ᴡᴏʀᴋɪɴɢᴡᴏʀᴋɪɴɢxᴀᴍᴘʟᴇ⧩

 var myChart = new Chart(ctx, { type: 'bar', data: { labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'], datasets: [{ label: 'DST1', backgroundColor: '#3e95cd', data: [3, 2, 4, 5, 1] }, { label: 'DST2', backgroundColor: '#8e5ea2', data: [2, 4, 1, 2, 5] }] }, options: { scales: { yAxes: [{ ticks: { beginAtZero: true, stepSize: 1 } }] }, title: { display: true, text: 'Title' }, tooltips: { mode: 'label', callbacks: { label: function(t, d) { var dstLabel = d.datasets[t.datasetIndex].label; var yLabel = t.yLabel; return dstLabel + ': ' + yLabel + ' €'; } } } } }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.js"></script> <canvas id="ctx"></canvas> 

Answer 2

派對有點晚了，但我最近發現了JavaScript內置的貨幣格式化程序，可以節省您使用字符串並在這里提供幫助，並且可以在代碼的其他地方重復使用！：

const gbp = new Intl.NumberFormat('en-GB', {
    style: 'currency',
    currency: 'GBP',
    minimumFractionDigits: 2
});

作為英語，我當然用英鎊做了，但是我發現將en-GB改為de-DE而'GBP'改為'EUR'絕對沒問題。 甚至正確格式化小數點和千位分隔符。

編輯：包括如何實際給格式化程序一個數字格式將是有用的不是它！

gbp.format(10000); // Returns £10,000.00