Question

我正在试图弄清楚，每当屏幕尺寸发生变化时我都可以重新加载我的ChartJS组件，因为它正在弄乱当前的响应速度。我的目标是在调整大小后重新加载它们，或者在调整大小并在调整大小后再次加载时删除它们。

这是我的代码到目前为止的图形组件，由于某种原因它忽略了计时器，但是可能只是在加载组件时调用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);
        }
    }
}

Answer 1

您是否考虑过使用vue-charts？这是vue的google-chart包装器，它导出draw方法并调整窗口大小变化很容易：

<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();
    })
  },

相同的jQuery可以帮助您解决问题。

Answer 2

我修复了这部分问题，请点击此处查看：https://github.com/chartjs/Chart.js/issues/2777#issuecomment-226219784

当屏幕调整大小时，VueJS和动态重新加载ChartJS

2 个答案: