angular - ChartJS 刻度值不正确

问题描述

我正在使用 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">

标签： angularchart.jsng2-charts

使用您提供的代码，如果我尝试正常打印，刻度数组包含正确的刻度：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>

angular - ChartJS 刻度值不正确

问题描述

解决方案

推荐阅读