Chart.jsツールチップのキャレット位置を変更

Question

Chart.js 2.5を使用してドーナツチャートを作成しました。私が持っている問題はツールチップです。

私はそれは常にで表示されるように、キャレット位置を変更したい：私は、チャート上にカーソルを移動すると、ツールヒントは、このように、常に左側または右側にとどまるキャレットと表示されています下。それは可能ですか？ここで

は私のチャートコード

var myChart = new Chart(ctx, { 
    type: 'doughnut', 
    data: { 
     labels: ['Jan', 'Feb', 'Mar'], 
     datasets: [{ 
      label: 'dataset', 
      data: [30, 50, 20], 
      backgroundColor: [ 
      'rgb(153, 102, 255)', 
      'rgb(255, 205, 86)', 
      'rgb(54, 162, 235)' 
      ], 
     }], 
    } 
}) 

Answer 1

はあなたが...一番下の位置に常にs「のツールチップを表示するには、あなたのチャートオプションでツールチップのためbottomに

options: { 
    tooltips: { 
     yAlign: 'bottom' 
    } 
} 

をキャレットを yAlignプロパティを設定することができています

ᴅᴇᴍᴏ

var ctx = document.getElementById("chart").getContext("2d"); 
 
var myChart = new Chart(ctx, { 
 
    type: 'doughnut', 
 
    data: { 
 
     labels: ['Jan', 'Feb', 'Mar'], 
 
     datasets: [{ 
 
      label: 'dataset', 
 
      data: [30, 50, 20], 
 
      backgroundColor: ['rgb(153, 102, 255)', 'rgb(255, 205, 86)', 'rgb(54, 162, 235)'] 
 
     }] 
 
    }, 
 
    options: { 
 
     responsive: false, 
 
     tooltips: { 
 
      yAlign: 'bottom' 
 
     } 
 
    } 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script> 
 
<canvas id="chart" height="180"></canvas>

Answer 2

あなたは "下" にyAligntooltips configurationオプション設定することでこれを行うことができます。

options: { 
    tooltips: { 
     yAlign: "bottom" 
    } 
} 

JSFiddleデモ：ツールチップをカスタマイズする方法のhttps://jsfiddle.net/tksr7bn9/

Answer 3

ロットを。 CodePenによる良い例があります。

https://codepen.io/mab213/pen/PZOXdE

customTooltips: function(tooltip) { 
 
    // Tooltip Element 
 
    var tooltipEl = $('#chartjs-tooltip'); 
 
    // Hide if no tooltip 
 
    if (!tooltip) { 
 
    tooltipEl.css({ 
 
     opacity: 1 
 
    }); 
 
    return; 
 
    } 
 
    // Set caret Position 
 
    tooltipEl.removeClass('above below'); 
 
    tooltipEl.addClass(tooltip.yAlign); 
 
    tooltipEl.addClass(tooltip.xAlign); 
 
    // Set Text 
 
    tooltipEl.html(tooltip.text); 
 
    // Find Y Location on page 
 
    var top; 
 
    if (tooltip.yAlign == 'above') { 
 
    top = tooltip.y - tooltip.caretHeight - tooltip.caretPadding; 
 
    } else { 
 
    top = tooltip.y + tooltip.caretHeight + tooltip.caretPadding; 
 
    } 
 
    // Display, position, and set styles for font 
 
    tooltipEl.css({ 
 
    opacity: 1, 
 
    left: tooltip.chart.canvas.offsetLeft + tooltip.x + 'px', 
 
    top: tooltip.chart.canvas.offsetTop + top + 'px', 
 
    fontFamily: tooltip.fontFamily, 
 
    fontSize: tooltip.fontSize, 
 
    fontStyle: tooltip.fontStyle, 
 
    xOffset: tooltip.xOffset, 
 
    }); 
 
}