chart.jsのあれこれ tooltips編

この前に色々弄っていてある程度のカスタマイズが出来るようになりましたので、そのメモを残します。

でもがっつりカスタマイズやりたいのであれば、highchartsやamchartsでやったほうが良いですね。 非商用なら無償で使えるので、個人で試すのもありかも

ちなみに自分はまだエンジニア数ヶ月でJSもよくわかってないのにぶん投げられて四苦八苦してやりました泣
ではchart.jsに戻ります。

まずは作った全文から、だいぶ長くなります。 今回はtooltips編です

window.onload = function()
{
    var customTooltips = function(tooltipModel)
    {
        // ツールチップ要素
        var tooltipEl = document.getElementById('chartjs-tooltip');

        // 最初の表示時に要素を生成。
        if (!tooltipEl) {
            tooltipEl = document.createElement('div');
            tooltipEl.id = 'chartjs-tooltip';
            tooltipEl.innerHTML = "<table></table>"
            this._chart.canvas.parentNode.appendChild(tooltipEl);
        }

        if (tooltipModel.opacity === 0) {
            tooltipEl.style.opacity = 0;
            return;
        }

        tooltipEl.classList.remove('above', 'below', 'no-transform');
        if (tooltipModel.yAlign) {    
            tooltipEl.classList.add(tooltipModel.yAlign);        
        } 
        else{ 
             tooltipEl.classList.add('no-transform');     
        }   
        function getBody(bodyItem) { 
             return bodyItem.lines;      
        }  
       if (tooltipModel.body) { 
           var titleLines = tooltipModel.title || []; 
           var bodyLines = tooltipModel.body.map(getBody);       
           var innerHtml = '<thead>';    
           titleLines.forEach(function(title) {
               innerHtml += title;     
           });           
          innerHtml += '</thead><tbody>';      
            //削除ボタン用   ボタンを押したらその日のグラフを削除したいという要件があったため       
          var index = tooltipModel.dataPoints[0].index;       
          //削除ボタン用　タップした凡例文字が一致したら値付与     
           var vital_text = tooltipModel.body[0].lines; 
           var str = vital_text.toString();      
           if( str.match( /text1/ ) ) {
                text = 0;      
            }      
            else if( str.match( /text2/ ) )  { 
                text = 1;
            }
            else if( str.match( /text3/ ) ) {
                text = 2;
            }
            else if( str.match( /text4/ ) ) {
               text = 3;
            }

             window.tipDelete = function tipDelete(){
                var result = window.confirm('削除しても宜しいですか？');
                if ( result )
                {
                    myLineChart.data.datasets[text].data[index] =  0;
                    myLineChart.update();
                }
            }

            var dayStr = myLineChart.data.labels.toString();
            bodyLines.forEach(function(body, i) {
                var colors = tooltipModel.labelColors[i];
                var style = 'background:' + colors.backgroundColor;
                var span = '<span class="chartjs-tooltip-key" style="' + style + '"></span>';
                if( dayStr.match(/月/) || dayStr.match(/年/)) {
                    innerHtml += '<tr><td>' + span + body + '</td></tr>';
                }
                else {
                    innerHtml += '<tr><td>' + span + body + '</td></tr>'
                    + '<a href="/users/vital-transition/1/edit"><button id="tip-edit">' + '編集' +'</button</a>'
                    + '<button id="tip-delete" onClick="tipDelete()">' + '削除' + '</button>';
                }
            });
        }
        var tableRoot = tooltipEl.querySelector('table');
        tableRoot.innerHTML = innerHtml;
　　//ここら辺はポイントクリック時のtooltipsの場所を指定してます。
        var positionY = this._chart.canvas.offsetTop;
        var positionX = this._chart.canvas.offsetLeft;
　　
        tooltipEl.style.opacity = 1;    
        tooltipEl.style.top = positionY + (tooltipModel.caretY / 2) + 'px';
        tooltipModel._fontFamily;
        tooltipEl.style.fontSize = tooltipModel.fontSize;
        tooltipEl.style.fontStyle = tooltipModel._fontStyle;
        tooltipEl.style.padding = tooltipModel.yPadding + 'px ' + tooltipModel.xPadding + 'px';
};

基本的には公式に乗っているんですが、それでは対応できないこともやってあります。

わからない、ググってもそれっぽいのがない時はひたすらconsole.logで当たっているプロパティを探す感じですね!

ここで作ったtooltips用の関数をchart.jsでのインスタンスにあてていきます。

次はデータ編にいきます。