时间戳

首页 > 解决方案 > Chart.js 为混合字体样式自定义刻度标签

javascript - Chart.js 为混合字体样式自定义刻度标签

问题描述

我正在使用 React 和 Chart.js 构建一个图表，我需要显示具有混合字体样式的刻度标签。Chart.js 将刻度值作为传入文本的字符串以及包装我们想要斜体的值的 HTML 标记返回。

我尝试编写一个回调函数来返回 jsx，它消除了 y 轴刻度线。此外，我尝试将条件应用于 fontStyle 道具，并自定义标签中的 html。

let italicizedFont = 'Font'.italics()
console.log(italicizedFont)
var myChart = new Chart(ctx, {
  type: 'horizontalBar',
  data: {
    labels: ["Normal Font", "Mixed <i>Font</i>", `Mixed ${italicizedFont}`, 'Mixed font in <i>Return</i>'],
    datasets: [{
      data: [12, 19, 8],
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
      ],
      borderColor: [
        'rgba(255,99,132,1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(75, 192, 192, 1)',
      ],
      borderWidth: 1
    }]
  },
  options: {
    responsive: false,
    scales: {
      xAxes: [{
        ticks: {
          beginAtZero: true
        }
      }],
      yAxes: [{
        ticks: {
          callback: (value, i, values) => {
            if(i !== 3 ){
              return value
            }
            return values[3].replace(/<i>/g, '').replace(/<\/i>/g, '')
        },
          // fontStyle:  'italic'
        }
      }]
    }
  }
});

代码笔示例

我希望 Chart.js 会将字符串“普通文本斜体文本”转换为字符串。但是，Chart.js 似乎只能返回完全斜体的字符串“普通文本斜体文本”或包含 html 标记的字符串。

标签： javascriptreactjschart.jsreact-chartjs

解决方案

推荐阅读