Vue 3 HighchartsVue

Question

未捕获的引用错误：Highcharts 未定义。

我正在使用 Vue3 应用程序。

在我的

app.js

文件中我已声明，

import HighchartsVue from 'highcharts-vue';

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
    setup({ el, App, props, plugin }) {
        return createApp({ render: () => h(App, props) })
            .use(plugin)
            .use(ZiggyVue, Ziggy)
            .use(HighchartsVue)
            .mount(el);
    }
});

然后在我的 component.vue 文件上，我可以毫无问题地使用

<highcharts>

组件。

但是我不能使用

Highcharts.dateFormat()

方法， 它返回一个错误

Uncaught ReferenceError: Highcharts is not defined

我正在尝试将其应用到此工具提示上。

tooltip: {
        formatter: function() {
            return 'Amount' + Highcharts.dateFormat('%e %b %Y', this.x);
        }
    },

如何使用选项 API 在 Vuejs 上使用

Highcharts.dateFormat()

方法？

Answer 1

使用前需要导入

import Highcharts from 'highcharts'

...

tooltip: {
        formatter: function() {
            return 'Amount' + Highcharts.dateFormat('%e %b %Y', this.x);
        }
    },