Vue2+ChartJs中无法向labels数组推入日期数据的问题求助

问题 #

我正在使用Vue2和ChartJs进行开发，现有一组数据数组。目前可以正常将lossEmptyUnits推入dataset的data数组，但尝试将date字段推入chartData的labels数组时却无法成功，labels始终为空。我需要实现该操作以按月份对数组进行排序，尝试了两次调用接口的方式仍未解决问题。

原代码 #

export default {
  data(){
    return {
      chartData: {
        height: '400px',
        type: 'bar',
        labels: [],
        datasets: [
          {
            data: [],
            backgroundColor: 'green'
          } ],

      },
      chartOptions: {
        responsive: true,
      },
      options: {
        plugins: {
          legend: {
            display: false,
          },
        },
        scales: {
          yAxes: [
            {
              ticks: {
                suggestedMin: 0,
                suggestedMax: 0,
                callback: value => this.$n(value)
              }
            }
          ]
        }
      }
    }
  },
  created(){
    biService.getBIGraphStatsForCompany()
        .then(result => result.data.propertyStatsPerMonth.forEach(field => this.chartData.datasets[0].data.push(field.lossEmptyUnits)))
        .catch(error => console.error(error));
  }
}

尝试的代码 #

created(){
    biService.getBIGraphStatsForCompany()
        .then(result => result.data.propertyStatsPerMonth.forEach(field => this.chartData.datasets[0].data.push(field.lossEmptyUnits)))
        .catch(error => console.error(error));
    biService.getBIGraphStatsForCompany()
        .then(result => result.data.propertyStatsPerMonth.forEach(field => this.chartData.labels[0].push(field.date)))
        .catch(error => console.error(error));
  }

解决方案 #

问题根源 #

1. 接口调用冗余：两次调用biService.getBIGraphStatsForCompany()完全没必要，既浪费资源还可能引发数据不同步问题。
2. labels数组操作错误：this.chartData.labels[0].push(field.date)写法错误——labels本身是空数组，labels[0]不存在，直接调用push会导致报错，应该直接对this.chartData.labels执行push操作。

修复后的代码 #

created(){
    biService.getBIGraphStatsForCompany()
        .then(result => {
          // 加载新数据前清空原有内容，避免重复叠加
          this.chartData.labels = [];
          this.chartData.datasets[0].data = [];
          
          // 同步填充数据和标签
          result.data.propertyStatsPerMonth.forEach(field => {
            this.chartData.datasets[0].data.push(field.lossEmptyUnits);
            this.chartData.labels.push(field.date);
          });
          
          // 按月份排序数据与标签（假设date为"YYYY-MM"格式）
          const sortedPairs = this.chartData.labels.map((label, index) => ({
            label,
            value: this.chartData.datasets[0].data[index]
          })).sort((a, b) => a.label.localeCompare(b.label));
          
          // 重新赋值排序后的结果
          this.chartData.labels = sortedPairs.map(pair => pair.label);
          this.chartData.datasets[0].data = sortedPairs.map(pair => pair.value);
        })
        .catch(error => console.error(error));
  }

额外说明 #

• 如果date字段不是"YYYY-MM"这类可直接排序的格式（比如中文月份），需要先将其转换为数字月份等可排序格式后再执行排序逻辑。
• 每次加载数据前清空数组，能避免多次调用接口时数据重复累加的问题。

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