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

Question

在中使用KendoUI的Chart component时Vue,如何触发图表重绘/刷新?

虽然图表通过水平填充它的 parent 容器来调整宽度变化，但它是图表，最显着的是标题文本（a.k.a。图例) 和轴标签正在拉伸，表示图表呈现为 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();
  }
}

Answer 1

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

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

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

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

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

Triggering resize of Kendo UI Chart in VueJS?

javascript

vue.js

kendo-ui

telerik

window-resize