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

【问题标题】：VueJS and dynamic reload ChartJS when screen resize屏幕调整大小时VueJS和动态重新加载ChartJS
【发布时间】：2016-06-14 08:21:45
【问题描述】：

我试图弄清楚，当屏幕尺寸发生变化时，我如何重新加载我的 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);
        }
    }
}

【问题讨论】：

标签： chart.js vue.js

【解决方案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 可能会帮助您解决问题。

【讨论】：

谢谢，这是需要考虑的事情。 Google 图表是否需要 jQuery？我不使用它，所以我不想需要它。
不——我只是使用 jQuerry 来调整窗口大小:)
也许重做画布的一般规则是我需要的.. 嗯.. 只是想，已经为此苦苦挣扎了几天。我现在真的很想保留 ChartJS。

【解决方案2】：

我修复了这部分问题，请看这里以供参考：https://github.com/chartjs/Chart.js/issues/2777#issuecomment-226219784

【讨论】：