我有一个问题的图表在我的网站上:我想把一些文本放在粗体和下划线的工具提示像这张图片。图表图片:
我发现可以采取:* 工具提示标题字体样式:“粗体”* 或 * 标题字体样式:'bold'*,但都不起作用。你有什么办法吗?
h7appiyu1#
这对我很有效:我已经将字符串转换为加粗的unicode字符,并将它们传递给label回调中的工具提示。我只需要将标签的一部分加粗。在我的例子中,我只需要数字0123456789 -〉𝟬𝟭𝟮𝟯𝟰𝟱𝟲𝟳𝟴𝟵[这些是unicode加粗字符],所以我创建了简单的Map,或者你可以使用库进行转换。例如:conversion library i've found (not tested)。你可以制作其他类似的文本效果。我使用这种方法是因为chartjs中的标准工具提示对我的任务来说已经足够了,我不想仅仅因为粗体文本而从头开始编写外部工具提示。用ES6测试。如果您想制作自己的Map,这里有一些方便的工具,如本例所示:
label
unicodeValueMap: { 0: '\u{1D7EC}', 1: '\u{1D7ED}', 2: '\u{1D7EE}', 3: '\u{1D7EF}', 4: '\u{1D7F0}', 5: '\u{1D7F1}', 6: '\u{1D7F2}', 7: '\u{1D7F3}', 8: '\u{1D7F4}', 9: '\u{1D7F5}' }
unicodeValueMap: {
0: '\u{1D7EC}',
1: '\u{1D7ED}',
2: '\u{1D7EE}',
3: '\u{1D7EF}',
4: '\u{1D7F0}',
5: '\u{1D7F1}',
6: '\u{1D7F2}',
7: '\u{1D7F3}',
8: '\u{1D7F4}',
9: '\u{1D7F5}'
}
在label callback中,我已经用存储在map对象中的unicode替换了普通字符串字符。
var options = { callbacks: { label: (item) => { let boldValue = ""; [...item.formattedValue].forEach((char) => { if (char in unicodeValueMap) { boldValue += unicodeValueMap[char]; } else { boldValue += char; } }); return `${item.dataset.label}: ${boldValue}` }; }}
var options = {
callbacks: {
label: (item) => {
let boldValue = "";
[...item.formattedValue].forEach((char) => {
if (char in unicodeValueMap) {
boldValue += unicodeValueMap[char];
} else {
boldValue += char;
});
return `${item.dataset.label}: ${boldValue}`
};
结果:
希望这帮人
xe55xuns2#
你好,你可以构建自己的工具提示,这样它就可以返回到你想要的任何地方,例如,一个自定义的htmlhttp://www.chartjs.org/docs/latest/configuration/tooltip.html#external-custom-tooltips对于粗体字体,titleFontStyle的选项必须在options内部。工具提示:
var options = { type: 'line', data: { labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], datasets: [ { label: '# of Votes', data: [12, 19, 3, 5, 2, 3], borderWidth: 1 }, { label: '# of Points', data: [7, 11, 5, 8, 3, 7], borderWidth: 1 } ] }, options: { scales: { yAxes: [{ ticks: { reverse: false } }] }, tooltips: { titleFontStyle: 'bold', titleFontSize: 24 } }}var ctx = document.getElementById('chartJSContainer').getContext('2d');new Chart(ctx, options);
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [
{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1
},
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
]
options: {
scales: {
yAxes: [{
ticks: {
reverse: false
}]
tooltips: {
titleFontStyle: 'bold',
titleFontSize: 24
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
您可以在此处看到一个工作示例:https://jsfiddle.net/fpjzvh4m/希望这对你有帮助。P.D:我建议在问这类问题时,你包括一些你的代码。
2条答案
按热度按时间h7appiyu1#
这对我很有效:
我已经将字符串转换为加粗的unicode字符,并将它们传递给
label
回调中的工具提示。我只需要将标签的一部分加粗。在我的例子中,我只需要数字0123456789 -〉𝟬𝟭𝟮𝟯𝟰𝟱𝟲𝟳𝟴𝟵[这些是unicode加粗字符],所以我创建了简单的Map,或者你可以使用库进行转换。例如:conversion library i've found (not tested)。你可以制作其他类似的文本效果。我使用这种方法是因为chartjs中的标准工具提示对我的任务来说已经足够了,我不想仅仅因为粗体文本而从头开始编写外部工具提示。用ES6测试。如果您想制作自己的Map,这里有一些方便的工具,如本例所示:
在label callback中,我已经用存储在map对象中的unicode替换了普通字符串字符。
结果:
希望这帮人
xe55xuns2#
你好,你可以构建自己的工具提示,这样它就可以返回到你想要的任何地方,例如,一个自定义的html
http://www.chartjs.org/docs/latest/configuration/tooltip.html#external-custom-tooltips
对于粗体字体,titleFontStyle的选项必须在options内部。工具提示:
您可以在此处看到一个工作示例:
https://jsfiddle.net/fpjzvh4m/
希望这对你有帮助。
P.D:我建议在问这类问题时,你包括一些你的代码。