ChartJS滴答值不正确

Question

我正在研究角版11.0.4，我使用的是NG2-图表版本2.4.2。我必须渲染基本的线条图，与一些自定义的功能。其中一个特性是基于外部API值的颜色，一些网格线。

举个例子:对于yValue 2，我想要红色。

​

由于我还没有找到解决这个问题的好方法，所以我尝试这样做:在LineChart选项中，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将10值从18打印到0。图表将勾选值从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">

Answer 1

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

如果你想让数字2变成红色，剩下的是黑色，你最好的选择是更新到最新版本的chart.js，这意味着你需要使用NG2图表的测试版，那么你可以使用脚本选项。

​

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>

​