更改Chart.js工具提示插入符位置 [英] Change Chart.js tooltip caret position

问题描述

我使用 Chart.js 2.5创建了一个甜甜圈图。我遇到的问题与工具提示有关。当我将鼠标悬停在图表上时，将显示工具提示，并且插入符号始终停留在左侧或右侧，如下所示：

I created a doughnut chart using Chart.js 2.5. The issue I’m having is with the tooltip. When I hover over the chart, a tooltip is displayed with a caret that always stays in the left or right side, like this:

我想更改插入标记的位置，使其始终显示在底部。

I want to change the caret position so that it always show in the bottom. Is that possible?

这是我的图表代码

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

推荐答案

您可以设置 yAlign将属性设置为底部以获得图表选项中的工具提示，以始终将工具提示的 s 插入符号显示在底部位置...

You could set yAlign property to bottom for tooltips in your chart options to display tooltip's caret always at the bottom position ...

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>

这篇关于更改Chart.js工具提示插入符位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！