Chart.js 调整屏幕大小时VueJS和动态重新加载图表

我想弄清楚，当屏幕大小改变时，我如何重新加载我的ChartJS组件，因为此时它会扰乱响应。我的目标是在调整大小后重新加载它们，或者在调整大小时删除它们，并在调整大小后再次加载

这是我到目前为止为graph组件编写的代码，出于某种原因，它忽略了计时器，但可能不是在加载组件时才调用

ready（）

export default {
    props: {
        type: {
            type: String,
            required: true
        }
    },

    data() {
        return {
            data: {
                labels: ['2014', '2015', '2016', '2016'],
                datasets: [
                    {
                        label: "Administration",
                        backgroundColor: "rgba(255, 219, 77, 0.5)",
                        borderColor: "rgba(255, 219, 77, 1)",
                        borderWidth: 0,
                        hoverBackgroundColor: "rgba(255, 219, 77, 0.8)",
                        hoverBorderColor: "rgba(255, 219, 77, 1)",
                        data: [65, 59, 80, 81],
                    },
                    {
                        label: "Teaching",
                        backgroundColor: "rgba(255, 166, 77, 0.5)",
                        borderColor: "rgba(255, 166, 77, 1)",
                        borderWidth: 0,
                        hoverBackgroundColor: "rgba(255, 166, 77, 0.8)",
                        hoverBorderColor: "rgba(255, 166, 77, 1)",
                        data: [65, 59, 80, 81],
                    },
                    {
                        label: "Exam & Supervision",
                        backgroundColor: "rgba(102, 153, 204, 0.5)",
                        borderColor: "rgba(102, 153, 204, 1)",
                        borderWidth: 0,
                        hoverBackgroundColor: "rgba(102, 153, 204, 0.8)",
                        hoverBorderColor: "rgba(102, 153, 204, 1)",
                        data: [65, 59, 80, 81],
                    }
                ]
            },

            timoutHandle: null
        }
    },

    ready() {
        window.addEventListener('resize', this.reload);
        this.loadChart();
    },

    methods: {
        loadChart() {
            console.log('loading..');

            new Chart(
                this.$el.getContext('2d'),
                {
                    type: this.type,
                    data: this.data,
                    options: {
                        legend: {
                            position: 'bottom'
                        }
                    }
                }
            ); 
        },

        reload() {
            window.clearTimeout(this.timeoutHandle);

            this.timeoutHandle = window.setTimeout(
                this.loadChart(),
            3);
        }
    }
}

---

你是否考虑使用VUE图表？它是针对vue的google图表包装器，它导出绘图方法，并根据窗口大小的变化调整大小非常简单：

<template>
  <vue-chart
  :chart-type="chartType"
  :columns="columns"
  :chart-events="chartEvents"
  :rows="rowData"
  :options="options"
  v-ref:thisherechart
  ></vue-chart>
</template>

ready: function() {
    var self = this;
    jQuery(window).resize(function () {
      self.$refs.thisherechart.drawChart();
    })
  },

就绪：函数（）{
var self=这个；
jQuery（窗口）.调整大小（函数（）{
self.$refs.thisherchart.drawChart（）；
})
},

---

同一个jQuery可以帮助你解决问题。

你考虑使用VUE图表吗？它是针对vue的google图表包装器，它导出绘图方法，并根据窗口大小的变化调整大小非常简单：

<template>
  <vue-chart
  :chart-type="chartType"
  :columns="columns"
  :chart-events="chartEvents"
  :rows="rowData"
  :options="options"
  v-ref:thisherechart
  ></vue-chart>
</template>

ready: function() {
    var self = this;
    jQuery(window).resize(function () {
      self.$refs.thisherechart.drawChart();
    })
  },

就绪：函数（）{
var self=这个；
jQuery（窗口）.调整大小（函数（）{
self.$refs.thisherchart.drawChart（）；
})
},

---

同样的jQuery可以帮助你解决你的问题。

我修正了这个问题的一部分，看这里参考：

我修正了这个问题的一部分，看这里参考：

谢谢，这是要考虑的事情。谷歌图表需要jQuery吗？我不使用它，所以我宁愿不需要它。不-我只是使用jQuerry来调整窗口大小挂钩：）也许重做画布的一般规则就是我需要的。。隐马尔可夫模型。。我只是想，我已经为此挣扎了好几天了。我现在真的想把查特斯留在这里。谢谢，这是值得考虑的事情。谷歌图表需要jQuery吗？我不使用它，所以我宁愿不需要它。不-我只是使用jQuerry来调整窗口大小挂钩：）也许重做画布的一般规则就是我需要的。。隐马尔可夫模型。。我只是想，我已经为此挣扎了好几天了。我现在真的很想保留ChartJS。