使用highcharts-vue时如何重排HighCharts？答案

【问题标题】：How to reflow HighCharts when using highcharts-vue?使用highcharts-vue时如何重排HighCharts？
【发布时间】：2021-02-20 02:55:08
【问题描述】：

我有一个非常简单的组件：

<template>
    <div>
        <chart
            v-if="!loading"
            ref="priceGraph"
            constructor-type="stockChart"
            :options="chartData"
            :deepCopyOnUpdate="false"
        />
        <div v-else>Loading...</div>
    </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from "vue-property-decorator";
import { EventBus } from "../events";
import { Chart } from "highcharts-vue";
import { PriceData } from "src/models/DataFile";

@Component({
    components: { Chart }
})
export default class PriceChart extends Vue {
    @Prop({ type: Boolean, required: true })
    readonly loading!: boolean;

    @Prop({ type: Array, required: true })
    readonly prices!: PriceData;

    mounted() {
        EventBus.$on("reflow", () => {
            // NOT RIGHT:
            this.$refs.priceGraph.chart.reflow();
        });
    }

    get chartData() {
        return {
            xAxis: {},
            yAxis: {},
            series: [
                {
                    type: "candlestick",
                    data: this.prices
                }
            ]
        };
    }
}
</script>

根据highcharts-vue documentation，应该可以访问底层的Highcharts 实例，以便我可以调用reflow method。但是我无法弄清楚如何...

如果需要（例如，当需要获取一些数据或使用任何 Chart.prototype 函数时），您可以访问 Chart 对象实例，通过调用特定的 Vue 组件实例图表字段，但它不是支持使用其内置函数更新图表，因为这可能会导致您的应用程序和图表本身之间的数据同步出现问题（它会扰乱使用包装器的概念）。最推荐的实现方式是按照演示应用程序中的方式使用它。

“调用特定的 Vue 组件实例图表字段”是什么意思并不是 100% 清楚，但我假设这意味着我可以说 this.$refs.priceGraph.chart 来获取实例（“图表”字段Vue组件实例，我的理解是this.$refs.priceGraph应该是指Vue组件实例）

但它以两种不同的方式失败。在编译时，我从 TypeScript 收到以下错误：

ERROR in /home/stevenbarnett/Repos/stockgraph/src/components/PriceChart.vue(33,26):
TS2339: Property 'chart' does not exist on type 'Element | Element[] | Vue | Vue[]'.
  Property 'chart' does not exist on type 'Element'.
Version: typescript 3.9.5

如果我忽略此错误并运行我的代码，它会在控制台中显示 this.$refs.priceGraph is undefined 失败（尽管 Vue 开发工具显示它已填充）。见附件：

我做错了什么？

【问题讨论】：

它应该完全按照你的描述工作，所以在this.$refs.priceGraph.chart 上调用reflow 应该足够了。我想到的一件事是图表组件具有 v-if 属性，这可能会以某种方式阻止 Vue 在调用 mounted 生命周期钩子之前渲染它，我的意思是当时该引用不可用。你能在一些现场演示中重现这个问题吗？这是一个很好的起点，表明reflow可以通过上述方式调用：codesandbox.io/s/highcharts-vue-demo-forked-opvon
关于 Typescript 错误，我们知道 wrapper 可能会产生错误，因为 Vue v2 在打字意义上有点难以处理。我们肯定需要在更新准备包装以使用 v3 的同时处理类型。
我复制了您链接的演示并尝试重新创建我正在尝试做的事情的基础知识 (codesandbox.io/s/highcharts-vue-demo-forked-7sefk)。我注意到奇怪的是，每当我编辑一个文件并重新构建它时，我都会开始收到控制台错误（即使我只是对 CSS 进行了微小的调整并且不接触 JavaScript）。我必须刷新整个编辑器（不仅仅是里面的迷你浏览器）才能让它再次工作。即使在工作时，我也得到了与预期行为相反的行为（图表永远不是正确的大小）
谢谢。这个问题看起来像是 Vue 的问题，因为组件数据的 this.toggle 类正在正确更改，引用包含元素的类名不会立即更改，实际上 reflow() 方法在实际调用之前调用班级变化。避免它的最快方法是使用setTimeout 包装reflow 方法并以1ms 的延迟调用它，然后它将按您的预期工作。这是演示：codesandbox.io/s/highcharts-vue-demo-forked-geclj?file=/src/…
我猜我与_this.$refs.priceGraph is undefined 的问题与我在代码沙箱中看到的问题有关，每当我进行更改时，我都必须刷新页面。也许我需要清除我的缓存，重新启动 VS Code，然后重建我的整个项目。不过，我希望为我的 TypeScript 问题提供一个适当的解决方案，而不是随便在任何地方添加 /* ts-ignore */

标签： javascript typescript vue.js highcharts vuejs2

【解决方案1】：

你需要使用：

this.$nextTick(() => {
  this.$refs.priceGraph.chart.reflow();
});

这确保您引用的图表被渲染。

【讨论】：