减少 ng2-charts 的折线图中显示的值的数量答案

【问题标题】：reduce the number of values being shown in a line chart of ng2-charts in angular减少 ng2-charts 的折线图中显示的值的数量
【发布时间】：2019-10-05 22:55:30
【问题描述】：

我正在使用 ng2-charts 以角度显示折线图。 X 轴只显示几个标签，以免拥挤。

但 y 轴显示所有值。图表如下所示。

是否可以只显示那些显示 x 轴标签的 y 值？

我的代码

labels = ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'];

  chartData = [
    {
      fill: false,
      data: [21, 22, 24, 21, 21, 22, 23, 24, 23, 22, 24, 25],
      borderColor : 'black',
      pointBackgroundColor: 'black',
      pointHoverBackgroundColor: '#fff',
      pointBorderColor: '#0062ff',
      pointHoverBorderColor: 'red',
    }
  ];

 updateChartData(){
    console.log('in update chart data')
    console.log('temp values' + this.temperatureArray)
    this.chartData1[0].data =  this.temperatureArray
    this.labels = this.timeArray
  }

当我更新图表数据时，标签（X 值）和 y 值的数量会增加

【问题讨论】：

标签： angular linechart ng2-charts

【解决方案1】：

您可以按照@Tharzeer 的建议使用ticks 选项：

ticks's callback:

scales: {
  yAxes: [
    {
      ticks: {
        callback: value => value % 20 ? null : value
      }
    }
  ]
}

在此示例中，所有可被 20 整除的值都将被忽略。查看更多选项here。

callback 的参数是 value, index, values，因此您可以完全控制要跳过的内容。

我用这个official demo 创建了一个示例STACKBLITZ 来玩。尝试修改 ticks 对象中的值（左右标签有 2 个位置）

【讨论】：

【解决方案2】：

您可以在 html 文件中将选项传递给图表

<canvas ... [options]="lineChartOptions" [chartType]="'line'"></canvas>

options 需要一个对象，您可以在其中自定义最大值和其他内容的比例

https://www.chartjs.org/docs/latest/charts/line.html

【讨论】：