Javascript Chart.js重叠工具提示文本
我有一个chart.js折线图:Javascript Chart.js重叠工具提示文本,javascript,chart.js,Javascript,Chart.js,我有一个chart.js折线图: var myLineChart = new Chart(ctx, { type: 'line', data: lineChartData, options: { tooltips: { titleSpacing: 5, },
var myLineChart = new Chart(ctx, {
type: 'line',
data: lineChartData,
options: {
tooltips: {
titleSpacing: 5,
},
responsive: true,
legend: {
display: false,
},
scales: {
yAxes: \[
{
gridLines: {
color: '#354657',
},
ticks: {
fontColor: '#fff',
stepSize: 5,
},
},
\],
xAxes: \[
{
gridLines: {
color: '#354657',
},
ticks: {
fontColor: '#fff',
},
},
\],
},
},]
问题是,它使用重叠文本呈现工具提示,如图所示:
这应该显示电流,41.9。但它们是重叠的。我试着改变标题间距,但没用。如何解决此问题?我个人对所有自定义图表所做的是创建一个自定义标题/标签,与我作为选项传递给图表的内容无关。我喜欢控制输出到标签的HTML/任何内容。您可以使用callbacks键执行此操作
tooltips: {
enabled: true,
position: "nearest",
caretSize: 20,
mode: "index",
intersect: false,
titleFontSize: 16,
titleFontColor: "white",
backgroundColor: COLORS.DARK,
callbacks: {
title: (tooltipItem, _) => {
return formatDate("LT", tooltipItem[0].xLabel);
},
label: (tooltipItem, _) => {
const { yLabel } = tooltipItem;
return `${yLabel} Sessions Recorded`;
}
}
},
我个人对所有自定义图表所做的是创建一个自定义标题/标签,与我作为选项传递给图表的内容无关。我喜欢控制输出到标签的HTML/任何内容。您可以使用callbacks键执行此操作
tooltips: {
enabled: true,
position: "nearest",
caretSize: 20,
mode: "index",
intersect: false,
titleFontSize: 16,
titleFontColor: "white",
backgroundColor: COLORS.DARK,
callbacks: {
title: (tooltipItem, _) => {
return formatDate("LT", tooltipItem[0].xLabel);
},
label: (tooltipItem, _) => {
const { yLabel } = tooltipItem;
return `${yLabel} Sessions Recorded`;
}
}
},