在 VueJS 中触发 Kendo UI 图表的大小调整？答案

【问题标题】：Triggering resize of Kendo UI Chart in VueJS?在 VueJS 中触发 Kendo UI 图表的大小调整？
【发布时间】：2019-11-26 20:48:32
【问题描述】：

在Vue中使用Kendo UI的Chart component时，如何触发图表重绘/刷新？

虽然图表确实通过水平填充它的父容器来调整宽度变化，但它的图表和最显着的标题文本（又名 legend）和轴标签正在拉伸，表明图表呈现为SVG 图像。这种拉伸是不可取的，所以我需要以编程方式触发 resize / redraw / re-render 为documented here if using jQuery version of the package。

我已经使用 Vue.resize 调整大小处理程序：

<kendo-chart
    ref="chart"
    :series="series"
    v-resize:throttle.500="onResize"
/>

import { Component, Vue } from 'vue-property-decorator';

@Component
export default class MyChartComponent extends Vue {
  series = [...]; // some data here

  onResize() {
    // Resize method not found in this scope:
    // this.$refs.chart.resize();

    // Logging chart component to search for the refresh method...
    console.log(this.$refs.chart);
    console.log(this.$refs.chart.kendoWidget());
    // Did not find it there with extensive searching
    // through the objects in browser console.

    // Component's force update works but would be a costly operation:
    // this.$forceUpdate();
  }
}

【问题讨论】：

标签： javascript vue.js kendo-ui telerik window-resize

【解决方案1】：

找到了一种访问resize 方法的方法，虽然不是一个完全干净的解决方案：

get chartWidget(): any {
  return (this.$refs.chart as KendoChart).kendoWidget() as any;
}

// eslint-disable-next-line no-underscore-dangle
this.chartWidget._resize();

有兴趣听到更好的方法，它也适用于正确的类型。

【讨论】：