Question

我有点困惑，因为我没有找到在 y 轴粗体上做一些点的任何解决方案。

我想将“总和标签”的样式更改为粗体。

var mc1 = new Chart(document.getElementById("mychart"), {
  type: 'horizontalBar',
  data: {
    labels: ["sum(A+B)",
      "A",
      "B",
      "sum(C+D)",
      "C",
      "D"
    ],

    datasets: [{
      backgroundColor: '#0066b3',
      label: '# von 5',
      data: [5, 3, 2, 7.5, 3, 4.5]
    }]
  },
  options: {
    scales: {
      xAxes: [{
        ticks: {
          suggestedMin: 0,
          suggestedMax: 5,
          beginAtZero: true
        }
      }],
      yAxes: [{
        ticks: {
          barThickness: 30,
          beginAtZero: true
        }
      }]
    },
    legend: {
      display: false
    },
    responsive: true,
    text: 'Mychart'

  }

});
mc1.options.scales.yAxes[0].ticks.minor.fontWight = 'bold';

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"></script>
<canvas id="mychart"></canvas>

JSFiddle demo。

Answer 1

默认情况下，这在 V2 中是不可能的，在即将发布的 V3 版本中，您可以使用可脚本化的 fontStyle 选项来实现这一点，如下例所示：

var options = {
  type: 'bar',
  data: {
    labels: ["sum(A+B)",
      "A",
      "B",
      "sum(C+D)",
      "C",
      "D"
    ],
    datasets: [{
      backgroundColor: '#0066b3',
      label: '# von 5',
      data: [5, 3, 2, 7.5, 3, 4.5]
    }]
  },
  options: {
    indexAxis: 'y',
    scales: {
      y: {
        ticks: {
          font: {
            style: (tick) => (tick?.tick?.label.includes('sum') ? 'bold' : 'normal')
          }
        }
      }
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.0.0-beta.13/chart.js" integrity="sha512-JS/WtaFglOYbXbMt9s52TO0QEzWljfCG2dFTC6aW9bJdP40kC37uoV+EzI06/LgpfX65oTnS1jUXxscH2xlG1Q==" crossorigin="anonymous"></script>
</body>

用粗体格式化 y 轴标签

1 个答案: