javascript - Chart.js v2 : how to add tooltips of metadata?

Question

我想为每个工具提示添加元数据。

数据是

x.label=['jan.', 'feb.','mar.','apr.','may','jun']
x.data=[-30,-24,-10,4,12,15]
x.metadata=['extrmely cold','exreme cold too','mostlry spring','spring has come!', 'sakura blooming' ,'hot!']

当我点击(四月，4)时，工具提示会显示

'apr., 4°C \n spring has come!'

如何编辑工具提示功能？

Answer 1

这对我有用。我在 tooltip.callbacks.label 函数中创建了一个数组(myArr 变量)，并附加了返回值。我认为，如果您将 x.metadata 值放入 myArr，它将起作用。

var options = {
                    tooltips: {
                        enabled:false,
                        callbacks:{
                            label: function(tooltipItem, data) {
                                var myArr = [11,22,33,44,55]
                                var datasetLabel = data.datasets[tooltipItem.datasetIndex].label || '';
                                //This will be the tooltip.body
                                return datasetLabel + ': ' + tooltipItem.yLabel +' :'+ myArr[tooltipItem.index];
                            },
                        },
                        custom: function(tooltip) {
                            var tooltipEl = $('#chartjs-tooltip');

                            if (!tooltip) {
                                tooltipEl.css({
                                    opacity: 0
                                });
                                return;
                            }

                            if (typeof  tooltip.body != 'undefined') {

                                var bodyText = tooltip.body[0].split(":");
                                var innerHtml = '<span class="chartjs-tooltip-header"><b>'+tooltip.title[0]+'</b></span><br>'
                                                +'<span>' + bodyText[0].trim() + '</span> : <span><b>' + bodyText[1].trim() +'</b></span>'
                                                +'<span>' + bodyText[2].trim() + '</span>';
                                tooltipEl.html(innerHtml);

                                tooltipEl.css({
                                    opacity: 1,
                                    left: (tooltip.xPadding * 3) + tooltip.x + 'px',
                                    top: (tooltip.yPadding * 3) + tooltip.y + 'px',
                                });

                            } 

                        }
                    }
                };