我正在使用图表js 2显示多个折线图。我想设置一个自定义工具提示,以便当用户将鼠标悬停在图形上的某个点时可以查看其他数据。但是,每次我添加一个回调函数(无论该函数返回什么)时,都会导致工具提示消失。它会在短时间内正确呈现我的自定义文本,但随后消失。我必须不断地移动鼠标才能阅读工具提示。这是有关此功能https://www.chartjs.org/docs/latest/configuration/tooltip.html#label-callback
的文档我已经尝试过更改几乎所有图表选项。我目前正在使用回调函数“标签”,但我也尝试过beforeLabel和afterLabel。我注意到的一件事是当我更改“ animation:{duration}”的值时产生了影响。当前设置为0是因为图表变化时我不希望其他任何动画,因为它们经常更新。我将其设置为1000,我注意到工具提示持续了更长的时间并且背景变暗,但是整个图表的渲染似乎变慢了。我还将回调函数的格式从箭头函数更改为常规函数。
这是我的图表选项,其相关部分在末尾处的间距更大:
const chartOptions = {
legend: {
labels: {
fontColor: NUMBER_COLOR,
fontSize: 12
}
},
scales: {
xAxes: [{
scaleLabel: {
display: true,
labelString: "Frame",
fontColor: SCALE_LABEL_COLOR,
fontSize: 14
},
stepSize: ystep,
ticks: {
min: XMIN,
max: XMAX,
stepSize: (XMAX - XMIN) / TICK_NUMS,
maxRotation: 0,
minRotation: 0,
fontColor: NUMBER_COLOR,
fontSize: 12
},
type: "linear"
}],
yAxes: [{
scaleLabel: {
display: true,
labelString: this.props.yAxisUnits,
fontColor: SCALE_LABEL_COLOR,
fontSize: 14
},
ticks: {
id: "0",
min: yChartMin,
max: yChartMax,
stepSize: Number(((yChartMax - yChartMin) / TICK_NUMS).toFixed(DECIMAL_NUM)),
maxRotation: 0,
minRotation: 0,
display: true,
fontColor: NUMBER_COLOR,
fontSize: 13
}
}]
},
animation: {
duration: 0
},
tooltips: {
intersect: true,
mode: "nearest",
enabled: true,
callbacks: {
label: (tooltipItems, data) => {
const labelText = [
data.datasets[tooltipItems.datasetIndex].label + ": " + data.datasets[tooltipItems.datasetIndex].data[tooltipItems.index].y,
"Time: " + data.datasets[tooltipItems.datasetIndex].data[tooltipItems.index].time
];
return labelText;
}
}
}
};
数据点本身遵循以下格式:
{
x: xValue,
y: yValue,
time: timeValue
}
我的图表通过以下方式显示:
<Line
data={chartData}
options={chartOptions}
width={DEFAULT_WIDTH}
height={DEFAULT_HEIGHT}
getElementAtEvent={(e: any) => this.clickedElement(e)}
/>
当我删除回调函数“标签”时,工具提示仍然存在并按预期显示。如果您可以通过任何方式提供帮助,请告诉我。
谢谢!