ChartJS 如何给图表加下划线和加粗工具提示js

yeotifhr  于 2022-11-06  发布在  Chart.js
关注(0)|答案(2)|浏览(282)

我有一个问题的图表在我的网站上:我想把一些文本放在粗体和下划线的工具提示像这张图片。
图表图片:

我发现可以采取:* 工具提示标题字体样式:“粗体”* 或 * 标题字体样式:'bold'*,但都不起作用。
你有什么办法吗?

h7appiyu

h7appiyu1#

这对我很有效:
我已经将字符串转换为加粗的unicode字符,并将它们传递给label回调中的工具提示。我只需要将标签的一部分加粗。在我的例子中,我只需要数字0123456789 -〉𝟬𝟭𝟮𝟯𝟰𝟱𝟲𝟳𝟴𝟵[这些是unicode加粗字符],所以我创建了简单的Map,或者你可以使用库进行转换。例如:conversion library i've found (not tested)。你可以制作其他类似的文本效果。我使用这种方法是因为chartjs中的标准工具提示对我的任务来说已经足够了,我不想仅仅因为粗体文本而从头开始编写外部工具提示。用ES6测试。
如果您想制作自己的Map,这里有一些方便的工具,如本例所示:

  1. unicodeValueMap: {
  2. 0: '\u{1D7EC}',
  3. 1: '\u{1D7ED}',
  4. 2: '\u{1D7EE}',
  5. 3: '\u{1D7EF}',
  6. 4: '\u{1D7F0}',
  7. 5: '\u{1D7F1}',
  8. 6: '\u{1D7F2}',
  9. 7: '\u{1D7F3}',
  10. 8: '\u{1D7F4}',
  11. 9: '\u{1D7F5}'
  12. }

在label callback中,我已经用存储在map对象中的unicode替换了普通字符串字符。

  1. var options = {
  2. callbacks: {
  3. label: (item) => {
  4. let boldValue = "";
  5. [...item.formattedValue].forEach((char) => {
  6. if (char in unicodeValueMap) {
  7. boldValue += unicodeValueMap[char];
  8. } else {
  9. boldValue += char;
  10. }
  11. });
  12. return `${item.dataset.label}: ${boldValue}`
  13. };
  14. }
  15. }

结果:

希望这帮人

展开查看全部
xe55xuns

xe55xuns2#

你好,你可以构建自己的工具提示,这样它就可以返回到你想要的任何地方,例如,一个自定义的html
http://www.chartjs.org/docs/latest/configuration/tooltip.html#external-custom-tooltips
对于粗体字体,titleFontStyle的选项必须在options内部。工具提示:

  1. var options = {
  2. type: 'line',
  3. data: {
  4. labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
  5. datasets: [
  6. {
  7. label: '# of Votes',
  8. data: [12, 19, 3, 5, 2, 3],
  9. borderWidth: 1
  10. },
  11. {
  12. label: '# of Points',
  13. data: [7, 11, 5, 8, 3, 7],
  14. borderWidth: 1
  15. }
  16. ]
  17. },
  18. options: {
  19. scales: {
  20. yAxes: [{
  21. ticks: {
  22. reverse: false
  23. }
  24. }]
  25. },
  26. tooltips: {
  27. titleFontStyle: 'bold',
  28. titleFontSize: 24
  29. }
  30. }
  31. }
  32. var ctx = document.getElementById('chartJSContainer').getContext('2d');
  33. new Chart(ctx, options);

您可以在此处看到一个工作示例:
https://jsfiddle.net/fpjzvh4m/
希望这对你有帮助。
P.D:我建议在问这类问题时,你包括一些你的代码。

展开查看全部

相关问题