我已经实现了react-chartjs2 https://www.npmjs.com/package/react-chartjs-2 在我的 react 应用程序中。我已经成功实现了它,但我需要在将鼠标悬停在图表上时更改工具提示的方向。目前看起来是这样的
但我希望我的工具提示看起来像这样
我怎样才能实现这个目标
我的图表和图表选项代码
const barChartOptions = {
tooltips: {
custom: function(tooltip) {
if (!tooltip) return;
// disable displaying the color box;
tooltip.displayColors = false;
},
callbacks: {
// use label callback to return the desired label
label: function(tooltipItem, data) {
return tooltipItem.yLabel + " kWh";
},
// remove title
title: function(tooltipItem, data) {
return;
}
}
},
responsive: true,
maintainAspectRatio: false,
legend: {
display: false
},
scales: {
xAxes: [
{
barPercentage: 1,
barThickness: 10,
gridLines: {
display: false,
color: "rgba(0, 0, 0, 0.1)"
}
}
],
yAxes: [
{
gridLines: {
display: true,
categorySpacing: 90,
drawBorder: false,
color: "rgba(0, 0, 0, 0.1)"
},
ticks: {
beginAtZero: true,
min: 0,
max: 100,
stepSize: 20,
padding: 20
}
}
]
}
};
内部渲染
<Bar
data={data}
width={100}
height={400}
options={barChartOptions}
/>
最佳答案
options: {
tooltips: {
yAlign: "bottom"
}
}
问题是我不知道插入符位于盒子中间的方式。
关于javascript - 更改react-chartjs 2中的工具提示方向,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58709699/