如何在react-chartjs中使用HTML标签?

Question

我有以下代码:

const historicDate = ['<span>${day}<br/>${time}</span>', /* many more... */]
<Line
options={{
responsive: true,
plugins: {
legend: {
position: 'top' as const
}
}
}}
data={{
labels: historicDate,
datasets: [
{
label: 'Temperature',
data: [30, 31, /* many more... */],
borderColor: 'rgb(255, 99, 132)',
backgroundColor: 'rgba(255, 99, 132, 0.5)'
}
]
}}
/>

我想要实现的是将historicDate数组元素显示为html，但它被显示为字符串。

顺便说一句，我用的是:

• chart.js: v4.1.1
• react-chartjs-2: v5.1.0

Answer 1

要改变x轴的行为，我必须使用scales选项。如下:

<Line
options={{
responsive: true,
plugins: {
legend: {
position: 'top' as const
}
},
scales: {
x: {
ticks: {
callback: (value, index) => historicDate[index].split(',')
}
}
}
}}
data={{
labels: historicDate,
datasets: [
{
label: 'Temperatura',
data: historicTemperature,
borderColor: 'rgb(255, 99, 132)',
backgroundColor: 'rgba(255, 99, 132, 0.5)'
}
]
}}
/>