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

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

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

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

h7appiyu

h7appiyu1#

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

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}`
    };
  }
}

结果:

希望这帮人

xe55xuns

xe55xuns2#

你好,你可以构建自己的工具提示,这样它就可以返回到你想要的任何地方,例如,一个自定义的html
http://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);

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

相关问题