Question

我试图使用vue.js和chart.js创建一个应用程序来绘制潮汐数据。

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

我已阅读Chart.js will not render using vue.js until window resizes，其中描述了类似的问题，但与该问题不同，我的画布正确呈现。问题只是数据集。

我已尝试在不使用API的情况下通过道具传递数据，并且工作正常。

LineChart组件

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

就像你在这里链接的问题一样，这可能是由异步加载引起的另一个问题。您在子组件new Chart(...)中执行mounted，此时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标志，以确保我们只启动一次图表，因为它会自动调整为调整大小等。

Chart.js在图例调整大小或在图例中切换行之前无法正确呈现

1 个答案: