在窗口调整大小或在图例中切换行之前，Chart.js无法正确呈现 [英] Chart.js not rendering properly until window resize or toggling line in legend

问题描述

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

I'm trying to make an app to graph tide data using vue.js and chart.js.

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

I get my data from the Wunderground API using axios, format it for chart.js, then pass it using props to a component to graph it. However, when I initially load the page, a blank chart loads. Upon resizing the window, or toggling the dataset the data appears properly.

我已阅读这描述了类似的问题，但与这个问题，我的画布可以正确渲染。问题仅在于数据集。

I've read Chart.js will not render using vue.js until window resizes, which describes a similar problem, but unlike in that question, my canvas renders properly. The problem is only the dataset.

我尝试不使用API​​通过道具传递数据，并且效果很好。

I've tried passing data through the props without using the API, and it works fine.

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")
    }
  }
}

我是什么

推荐答案

就像您在此处链接的问题一样，这可能是异步加载引起的另一个问题。您正在子组件的装载的中执行新图表（...），此时 data 道具可能仍然是空的（从api网址传来）。尝试删除已安装的 并添加一个手表，例如：

Like the question you linked here, it's probably another problem caused by async loading. You're doing the new Chart(...) in the child component's mounted, by which time the data prop is probably still empty (on its way from the api url). Try removing the mounted and adding a watch like this:

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

我添加了已加载标志，以确保我们仅初始化图表一次，因为图表会自动调整为调整大小等。

I added a loaded flag here to make sure we only init the chart once, since it automatically adjusts to resizes, etc.

这篇关于在窗口调整大小或在图例中切换行之前，Chart.js无法正确呈现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！