Chart.js自定义各个垂直轴标签

2ul0zpep 于 2023-02-04 发布在 Chart.js

关注(0)|答案(1)|浏览(190)

我正在使用Chart.js创建一个水平条形图，如下所示。y轴有三个标签：A、B、C。如何单独设置这些垂直标签的样式？例如，我可能希望将其中一个或两个标签加粗和/或设置为红色。
我看了这个答案：https://stackoverflow.com/a/65463614/3851085。然而，这是x轴的解。对于y轴，需要不同的解来计算每个标签的x像素。
该代码片段使用的是较旧版本的Chart.js，但实际上我使用的是最新版本。

<html>

<head>
  <title>Horizontal Bars</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
</head>

<body>
  <div>
    <canvas id="canvas" height="100"></canvas>
  </div>
  <script>
    window.onload = function() {
      var ctx = document.getElementById('canvas').getContext('2d');
      window.myBar = new Chart(ctx, {
        type: 'horizontalBar',
        data: {
          labels: ['A', 'B', 'C'],
          datasets: [{
            data: [[1, 3], [4, 5], [2, 6]],
            backgroundColor: 'lightblue'
          }]
        },
        options: {
          responsive: true,
          legend: {
            display: false,
          }
        }
      });
    };
  </script>
</body>

</html>

chart.js

来源：https://stackoverflow.com/questions/75316500/chart-js-customize-individual-vertical-axis-labels

1条答案

按热度按时间

mmvthczy1#

文档对此并不清楚，但是您可以在options中使用arrays来配置标签。
下面是您的代码，经过重构以兼容Chart. js 4.2.0：

window.onload = function() {
  var ctx = document.getElementById('myChart').getContext('2d');
  window.myBar = new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ['A', 'B', 'C'],
      datasets: [{
        data: [[1, 3], [4, 5], [2, 6]],
        backgroundColor: 'lightblue'
      }]
    },
    options: {
      responsive: true,
      indexAxis: 'y',
      scales: {
        y: {
          ticks: {
            color: ['#ff0000', '#000000', '#000000'],
            font: {
              weight: ['bold', 'bold', 'normal']
            }
          }
        }
      },
      plugins: {
        legend: {
          display: false
        } 
      }
    }
  });
};

.chart-container {
  position: relative;
  height: 90vh;
}

<script src="https://cdn.jsdelivr.net/npm/chart.js@4.2.0"></script>

<div class="chart-container">
  <canvas id="myChart"></canvas>
</div>

赞(0）回复(0）举报 2023-02-04

我来回答

Chart.js自定义各个垂直轴标签

1条答案

相关问题

热门标签

最新问答