Chart.js 1/one/certain 标签上的粗体样式

Question

我的图表中有 12 个月。我需要加粗当前月份的标签。例子：这个月是四月。所以我需要用粗体标记 April。我搜索了如何加粗，但它影响所有标签。

这是我的代码：

var lineChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: label,
    datasets: [{
      label: "Visitors",
      backgroundColor: "transparent",
      borderColor: "rgba(38, 185, 154, 0.7)",
      tension: 0,
      data: value
    }]
  },
  options: {
    scale: {
      pointLabels: {
        fontStyle: "bold",
      },
    }
  }
});

Answer 1

您可以将 x-axis 上的 ticks.font 定义为 array 字体，如下所示：

scales: {
  x: {
    ticks: {
      font: labels.map(l => ({ weight: l == 'April' ? 'bold' : 'normal' }))
    }
  }
}

请查看下面的可运行示例代码，看看它是如何工作的。请注意，在此代码中，我更改了所需月份的字体 weight 和 size。

const labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
const data = [91, 85, 70, 96, 70, 81, 85, 66, 47, 26, 7, 4];

new Chart('myChart', {
  type: 'line',
  data: {
    labels: labels,
    datasets: [{
      label: "Visitors",
      backgroundColor: "transparent",
      borderColor: "rgba(38, 185, 154, 0.7)",
      tension: 0,
      data: data
    }]
  },
  options: {
    scales: {
      x: {
        ticks: {
          font: labels.map(l => ({
            size: l == 'April' ? 14 : 12,         
            weight: l == 'April' ? 'bold' : 'normal'          
          }))
        }
      }
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
<canvas id="myChart" height="90"></canvas>

Chart.js 1/one/certain 标签上的粗体样式

Chart.js Style bold on 1/one/certain label

asp.net-mvc

chart.js