如何在chart.js中更改反应线图工具提示标题字体族
如何在chart.js中更改反应线图工具提示标题字体族
提问于 2022-05-10 07:21:41
我使用的是"chart.js"："^3.7.1"，以及Reacti-chartjs-2在react应用程序中。我想更改图表工具提示字体系列。这是我在图表中使用的选项。我无法将字体族应用到线条图中。我想为工具提示中的标题应用自定义字体。我使用过图表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
Stack Overflow用户
回答已采纳
发布于 2022-05-10 07:59:48
可以读取这里时，需要为titleFont属性中的工具提示标题而不是title.font属性中的工具提示标题配置字体：
var options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderColor: 'orange'
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderColor: 'pink'
}
]
},
options: {
plugins: {
tooltip: {
titleFont: {
family: 'commic-sans-ms'
}
}
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.js"></script>
</body>
Stack Overflow用户
发布于 2022-09-22 13:14:54
您可以在图表的options属性中更改chart.js中的chart.js工具提示的样式。在options中，您需要访问插件对象中的工具提示，所以首先必须创建它，然后在其中创建工具提示对象。现在，您可以根据这个链接更改工具提示的一些特性。
例如：
plugins: {
tooltip: {
titleFont: { size: 13.2, family: "Yekan" },
bodyFont: { size: 14.2, family: "Yekan" },
callbacks: {
// to change the label context
label: function (context) {
var label = context.parsed.y;
return label;
},
},
},
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72182155
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号