ChartJS 将工具提示添加到分组条形图答案

【问题标题】：ChartJS add tooltip to a grouped bar chartChartJS 将工具提示添加到分组条形图
【发布时间】：2017-12-20 21:39:12
【问题描述】：

我正在尝试使用 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']] + ' €';
                    }
                }
            }
        }

但现在我遇到了另一个问题，它为两个不同的条显示相同的值：

您可以清楚地看到这些值是不一样的。这里有什么问题？

【问题讨论】：

你在使用 Chart.js v2 吗？
@TomasEglinskas Iam 使用 2.7.1 版
正在用 Fiddle jsfiddle.net/r4hrgu4n 进行实验，但我无法重现，也许其他地方有问题？
@TomasEglinskas 哦，哇，这很奇怪，我以为我的逻辑有误，但如果它对你有用，那肯定还有其他问题。非常感谢！！
希望对您有所帮助！

标签： javascript charts chart.js

【解决方案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>

【讨论】：

您说的完全正确，我刚刚阅读了秤，现在似乎可以使用了。我不知道想要在那里出错。您的工具提示示例效果很好。感谢您的努力！

【解决方案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

【讨论】：