chart.js v2：メタデータのツールチップを追加する方法は？

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月を。、4）その後、ツールチップがどのように私はツールチップ機能を編集することができます

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

を示して？

Answer 1

これは私の仕事です。私はtooltip.callbacks.label関数に配列（myArr変数）を作成し、戻り値を追加しました。私は、あなたがmyArrにあなたのx.metadata値を置くと、それは動作すると思います。

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', 
           }); 

          } 

         } 
        } 
       };