在调整窗口大小或切换图例中的线之前，Chart.js 无法正确呈现

Question

我正在尝试制作一个使用 vue.js 和 chart.js 绘制潮汐数据的应用程序。

我使用 axios 从 Wunderground API 获取数据，将其格式化为 chart.js，然后使用 props 将其传递给组件以绘制图表。但是，当我最初加载页面时，会加载一个空白图表。在调整窗口大小或切换数据集时，数据会正确显示。

我读过Chart.js will not render using vue.js until window resizes，它描述了一个类似的问题，但与那个问题不同的是，我的画布可以正确渲染。问题只是数据集。

我尝试在不使用 API 的情况下通过 props 传递数据，效果很好。

折线图组件

export default {
  name: 'LineChart',
  props: ['data', 'options'],
  mounted() {
    let ctx = document.getElementById('chart').getContext('2d')
    let chart = new Chart(ctx, {
        type: 'line',
        data: this.data,
        options: this.options
    })
  }
}

应用组件

export default {
  name: 'app',
  data() {
    return {
      url: 'http://api.wunderground.com/api/f219964b4d6ec312/tide/q/autoip.json',
      chartData: {
        labels: [],
        datasets: [
          {
            label: 'Tide',
            data: []
          }
        ]
      },
      chartOptions: {
        responsive: true,
        scales: {
          xAxes: [{
            type: 'time',
          }]
        }
      }
    }
  },
  components: {
    LineChart
  },
  created() {
    this.getWeatherData()
  },
  methods: {
    getWeatherData() {
      axios.get(this.url).then((response) => {
        response.data.tide.tideSummary.filter(this.isTideData).forEach((obj) => {
          let d = new Date(0)
          d.setUTCSeconds(obj.date.epoch)
          this.chartData.labels.push(d)
          this.chartData.datasets[0].data.push(parseFloat(obj.data.height))
        })
      })
    },
    isTideData(obj) {
      return (obj.data.type == "Low Tide" || obj.data.type == "High Tide")
    }
  }
}

我做错了什么？

Answer 1

就像您在此处链接的问题一样，这可能是异步加载引起的另一个问题。您正在子组件的mounted 中执行new Chart(...)，此时data 道具可能仍为空（从api url 开始）。尝试删除mounted 并添加watch，如下所示：

data() {
    return {
        loaded: false
    };
},
watch: {
    data: function (newVal, oldVal) {
        if (newVal.length>0 && !this.loaded) {
            this.loaded = true;
            new Chart(...);
        }
    }
}

我在这里添加了一个loaded 标志，以确保我们只初始化图表一次，因为它会自动调整以调整大小等。