Chart.js 3.6.2，Angular 10：对数折线图 Y 轴问题。即使数据发生变化，如何设置并保留 Y 轴属性？

Question

我正在使用 Chart.js 3.6.2 在 Angular 10 中创建图表。

我正在努力解决的一些问题：

1. Y 轴标签和线条不是静态的；不同的数据会导致显示不同数量的Y 轴标签和线条。如果我在第二个数据集中发表评论，我会得到：

• 更多（但不是全部）我想要的水平网格线（但缺少 Y=0），
• 更多（但不是全部）我想要的 Y 轴标签（因为我正在设计更大的显示区域）。

2. 我想显示一个Y轴从0开始到100的图表。但是，Y=0时不显示标签和网格线。由于不显示 Y=0，因此图表中也不会显示任何起始于（或结束于）Y=0 的线段。

我的目标就像这个图像（其他人使用旧的 Chart.js 2 创建的），最好具有相同数量的水平网格线：

我创建了一个简单的对数图表，每个数据集有 3 个数据点。相关代码如下所示以及this Stackblitz中。评论显示了我尝试过的一些不同的事情。 请注意，此代码有第二个数据集，已被注释掉。取消注释此数据集会导致 Y 轴发生变化。

<div style="padding: 1rem">
    <canvas id="myChart" width="400" height="400"></canvas>
</div>

export class AppComponent implements OnInit {
  @ViewChild('chartRef', { static: true }) chartRef: ElementRef;
  chart: Chart;

  ngOnInit() {
    this.createChart();
  }

  private get ctx(): CanvasRenderingContext2D {
    return (this.chartRef.nativeElement as HTMLCanvasElement).getContext(
      '2d'
    ) as CanvasRenderingContext2D;
  }

  private createChart(): void {
    if (this.chart) {
      this.chart.destroy();
    }
    if (!this.ctx) {
      return;
    }

    const myChart = new Chart(this.ctx, {
      type: 'line',
      data: {
        labels: ['Red', 'Blue', 'Yellow'],
        datasets: [
          {
            label: 'Blue Data',
            data: [0, 11.1, 20],
            borderColor: '#2184c6',
          },
          /* MARK COMMENT ONE: Uncommenting this changes the Y-axis */
          // {
          //   label: 'Orange Data',
          //   data: [0, 0.1, 85],
          //   borderColor: '#ff6f20',
          // },
        ],
      },
      options: {
        scales: {
          y:
            /** MARK COMMENT TWO:
           Uncommenting array brackets ("[" and "]") will cause non-logarithmic ticks (linear tick behavior), but starts with "0". I want to start with zero, with log ticks.
           */
            // [
            {
              type: 'logarithmic',
              bounds: 'ticks',
              // NOT A PROP FOR type: "logarithmic"
              // beginAtZero: true, //
              min: 0,
              max: 100, // required to make this always go to 100
              // grace: 10,
              // suggestedMax: 100,

              ticks: {
                display: true,
                // max: 100,
                // min: 20,
                // maxTicksLimit: 101,
              },
            },
          // ]
        },
      },
    });
  }

}

Answer 1

无法使用 Chartjs-3 修复。 “解决方案”是暂时继续使用chartjs-2。

尽管在 ChartJS-2 中可用的这些属性/功能已在 ChartJS-3 中删除，但根据下面列出的错误报告，似乎有计划在即将推出的 V4 中解决这些问题。

以下是来自 ChartJS github 存储库（版本 3）的一些相关错误报告的链接：

细化对数缩放/刻度生成#9166

对数刻度步长太大#7332

v3 回归：当点超出范围时不会绘制线条 #9564

Answer 2

stackblitz 上的数据不能从 0 开始，它需要一个数据点 0.01 例如 - 希望这有帮助