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

原文由 user8010590 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以将 yAlign 属性设置为 bottom 对于图表选项中的工具提示，始终在底部位置显示工具提示 的 插入符…

 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>

原文由 ɢʀᴜɴᴛ 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您可以通过将 yAlign 工具提示配置 选项设置为“底部”来执行此操作：

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

JSFiddle 演示： https://jsfiddle.net/tksr7bn9/

原文由 Tot Zam 发布，翻译遵循 CC BY-SA 3.0 许可协议