Angular中ng2-charts折线图仅显示对应X轴标签的Y轴值问题

当然可以实现！核心思路是让X轴显示的标签和Y轴的数据点一一对应，要么手动筛选数据，要么根据Chart.js自动生成的显示标签动态调整数据点的可见性。下面给你两种实用的方案：

方案一：手动筛选标签与对应数据（简单可靠） #

这种方法最直接——你主动控制哪些X轴标签需要显示，同时只保留这些标签对应的Y轴数据。比如你想每隔N个标签显示一个，就可以写个工具函数来过滤：

步骤1：添加筛选函数 #

在你的组件中新增一个过滤标签和数据的方法：

// 筛选标签和对应数据，step表示每隔几个显示一个
filterChartData(labels: string[], data: number[], step: number) {
  const filteredLabels: string[] = [];
  const filteredData: number[] = [];
  
  for (let i = 0; i < labels.length; i += step) {
    filteredLabels.push(labels[i]);
    filteredData.push(data[i]);
  }
  
  return { filteredLabels, filteredData };
}

步骤2：更新图表时调用筛选 #

修改你的updateChartData方法，用筛选后的数据和标签替换原数据：

updateChartData(){
  console.log('in update chart data')
  console.log('temp values' + this.temperatureArray)
  
  // 这里设置step=2，表示每隔1个标签显示一个（比如显示1、3、5...月）
  const { filteredLabels, filteredData } = this.filterChartData(this.timeArray, this.temperatureArray, 2);
  
  this.chartData[0].data = filteredData;
  this.labels = filteredLabels;
}

这样X轴只会显示你指定的标签，Y轴也只会展示对应的数据点，完全匹配你的需求。

方案二：自动匹配X轴显示的标签（动态场景） #

如果你的X轴标签数量是动态变化的，希望Chart.js自动根据空间调整显示的标签，同时隐藏对应未显示标签的数据点，可以通过Chart.js的插件钩子实现：

步骤1：配置Chart.js的插件选项 #

在你的图表配置中添加plugins钩子，在布局完成后获取X轴实际显示的标签，然后设置对应数据点的可见性：

// 假设你的图表配置是这样的
chartOptions = {
  responsive: true,
  scales: {
    x: {
      ticks: {
        // 可以设置最大显示标签数，让Chart.js自动调整
        maxTicksLimit: 6
      }
    }
  },
  plugins: {
    afterLayout: (chart) => {
      const xAxis = chart.scales.x;
      // 获取X轴实际显示的标签索引
      const displayedTickIndices = xAxis.ticks
        .filter(tick => tick.display)
        .map(tick => tick.index);
      
      // 调整数据点的半径：显示的标签对应点保留半径，隐藏的设为0
      const dataset = chart.data.datasets[0];
      dataset.pointRadius = dataset.data.map((_, index) => 
        displayedTickIndices.includes(index) ? 4 : 0
      );
      dataset.pointHoverRadius = dataset.data.map((_, index) => 
        displayedTickIndices.includes(index) ? 6 : 0
      );
    }
  }
};

步骤2：在模板中绑定配置 #

确保你的canvas标签绑定了这个配置：

<canvas baseChart
        [datasets]="chartData"
        [labels]="labels"
        [options]="chartOptions"
        [type]="'line'">
</canvas>

这种方法会让Chart.js自动处理X轴标签的显示，同时自动隐藏对应未显示标签的数据点，线条依然会连接所有点，但看不到隐藏的点。如果连线条也想只连接显示的点，还是推荐方案一。

内容的提问来源于stack exchange，提问作者chink