ChartJS 刻度值不正确答案

【问题标题】：ChartJS ticks values are not correctChartJS 刻度值不正确
【发布时间】：2021-11-03 10:35:39
【问题描述】：

我正在开发 Angular 版本 11.0.4，我正在使用 ng2-charts 版本 2.4.2。我必须渲染基本的折线图，并带有一些自定义功能。其中一项功能包括根据外部 API 值对一些网格线进行着色。

这是一个例子：对于 yValue 2，我想要红色。

由于我还没有找到解决这个问题的好方法，我正在尝试这个：在 LineChart Options 中，scales 中有 yAxes 对象。有一系列回调（这里是文档https://www.chartjs.org/docs/next/axes/#callbacks），它在渲染后给了我刻度的值。根据这些值，我更新网格线的颜色值。

问题在于接口提供的每一个回调都会给出一系列值，这些值不是图表呈现的值。

这是我写的：

      scales: {
    ...this.lineChartOptions.scales,
    yAxes: [{
      ticks: {
        beginAtZero: true
      }          
     afterTickToLabelConversion: (scale) => {
        console.log(scale);
        return scale;
      }
    }],

这是 console.log 打印的内容：

这就是图表呈现的内容：

如您所见，console.log 打印 从 18 到 0 的 10 个值。该图表呈现从 19 到 17 的刻度值。

HTML 代码：

<canvas id="chartContainer" baseChart width="400" height="400" [datasets]="lineChartData" [labels]="lineChartLabels"
[options]="lineChartOptions" [colors]="lineChartColors" [legend]="lineChartLegend" [chartType]="lineChartType"
[plugins]="lineChartPlugins">

【问题讨论】：

我已经尝试了选项中的每个回调：afterUpdate、afterFit。每一个都给了我相同的值，但图表显示的值。

标签： angular chart.js ng2-charts

【解决方案1】：

使用您提供的代码，如果我尝试正常打印，刻度数组包含正确的刻度：https://jsfiddle.net/Leelenaleee/bfc3evz1/6/。

如果您希望数字 2 为红色，其余为黑色，您最好的选择是更新到最新版本的 chart.js，这意味着您需要使用 ng2-charts 的 beta，然后您可以使用可编写脚本的选项。

var options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      borderColor: 'pink'
    }]
  },
  options: {
    scales: {
      y: {
        ticks: {
          color: ({
            tick
          }) => (tick.value === 12 ? 'red' : Chart.defaults.color)
        }
      }
    }
  }
}

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.5.1/chart.js"></script>
</body>

【讨论】：

我已经更新了库。有用。谢谢。