web-dev-qa-db-ja.com

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

Chart.js 2.5を使用してドーナツグラフを作成しました。私が抱えている問題はツールチップにあります。チャートにカーソルを合わせると、次のようにツールチップがキャレット付きで表示され、常に左側または右側に留まります。

side tooltip

キャレットの位置を変更して、常に下部に表示されるようにします。それは可能ですか？

ここに私のチャートコードがあります

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)'
            ],
        }],
    }
})
javascriptchartschart.js2
8
user8010590

チャートオプションのツールチップのyAlignプロパティをbottomに設定すると、常にツールチップ 'sキャレットを表示できます。ボトムポジション...

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

ᴅᴇᴍᴏ

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>
16
ɢʀᴜɴᴛ

これを行うには、yAligntooltips configuration オプションを「bottom」に設定します。

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

JSFiddle Demo： https://jsfiddle.net/tksr7bn9/

1
Tot Zam

ツールチップをカスタマイズする多くの方法。 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,
  });
}
1
Steven Ventimiglia