我使用的是“chart.js”:“^3.7.1”,沿着react web应用程序中的react-chartjs-2。我想更改图表工具提示字体系列。以下是我在图表中使用的选项。我无法将字体系列应用到折线图。我想为工具提示中的标题应用自定义字体。我使用了chart js文档中提到的属性
const options = {
animation,
plugins: {
tooltip: {
backgroundColor: "#fff",
displayColors: false,
borderColor: "#8b7a7a",
borderWidth: 0.5,
bodyColor: "#0000",
titleColor: "#8b7a7a",
// bodyFontColor: "#8b7a7a",
padding: 10,
footerSpacing: 0,
boxHeight: 10,
title: {
font: {
size: 50,
family: "'Work Sans',sans-serif",
},
},
callbacks: {
title: function (t, d) {
let datae = moment(t[0].label).format("MMM DD, YYYY");
const aa = t[0].dataset.label;
const val = t[0].formattedValue;
return `Date: ${datae.toString()}\n${aa}: ${val}`;
},
},
},
legend: {
display: false,
},
},
elements: {
line: {
tension: 0,
},
},
legend: {
display: false,
},
scales: {
x: {
grid: {
display: false,
},
},
y: {
grid: {
display: false,
},
},
},
};
2条答案
按热度按时间vwkv1x7d1#
如此处所示,您需要在
titleFont
属性中配置工具提示标题的字体,而不是在title.font
属性中:第一个
snz8szmq2#
您可以在chart.js中的chart的options属性中更改tooltip的样式。在options*,中,您需要访问plugins对象中的tooltip**,所以首先您需要创建它,然后在其中创建tooltipobject。现在,您可以根据此link更改tooltip的一些特性。
例如: