Question

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

我尝试编写一个回调函数以返回jsx，该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'
        }
      }]
    }
  }
});

Code Pen Example

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

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

0 个答案: