在图表上设置最小和最大轴值

Question

所以，我正在构建一个 Angular UI。使用 PrimeNG 图表组件，我有一个漂亮的小折线图。问题是图表的 y 轴是从数据数组的最小值开始的。我试过设置 ticks 选项但无济于事。我的 chartjs 版本是 2.9.4，因为任何更大的版本都会破坏 primeng。有任何想法吗？ component for reference

这是代码

HTML

<p-chart #chart type="line" [data]="data" [options]="basicOptions"></p-chart>

组件


  @Input() id!: string;

  data: any;
  basicOptions: any;
  stats: any;

  constructor(private statService: StatService) { }

  ngOnInit(): void {
    this.stats = this.statService.getStats(this.id)
    this.data = {
      labels: this.stats.map((stat: { create_date: any; }) => stat.create_date),
      datasets: [
          {
              label: 'Views',
              data: this.stats.map((stat: { count: any; }) => stat.count),
              borderColor: '#42A5F5',
              //fill:false,
              backgroundColor: 'rgba(2, 117, 216, 0.31)',
              tension:0.4,
          }
      ],
    }
/*previous code */
    this.basicOptions = {
     scales: {
       y: {
         ticks: {
           min: '0'
          },
        }
      }
  };
  } */

/*correct code*/
this.basicOptions = {
        scales: {
          yAxes: [{
            ticks: {
              min: 0,
              max: 40
            }
          }]
        }
    };

}```

Answer 1

您在使用 v2 时使用了 v3 语法，这是行不通的，您需要在单个数组中声明所有 y 轴，在单个数组中声明所有 x 轴，有关更多信息，请查看 v2 documentation .

示例：

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',
      fill: false
    }]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          min: 0,
          max: 40
        }
      }]
    }
  }
}

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/2.9.4/Chart.js"></script>
</body>

在图表上设置最小和最大轴值

Set minimum and maximum axis values on chart

chart.js

primeng

angular