HighCharts.js - 尝试导入 highstock

Question

我正在为 Vue 3 使用 highcharts.js。我正在尝试添加 highstock 库，但在 npm 中找不到它。包含它的正确方法是什么？

我认为它不包括在内，因为我收到此错误：

Uncaught (in promise) Error: Highcharts error #17: www.highcharts.com/errors/17/?missingModuleFor=ohlc
 - missingModuleFor: ohlc

这是他们从 cdn 导入的示例：http://jsfiddle.net/damo6174/d14ytfed/

<script src="http://code.highcharts.com/stock/highstock.js"></script>

Answer 1

示例如何在版本 3.0.0 中实施 Highcharts Stock Vue.js。

import { createApp } from "vue";
import Highcharts from "highcharts";
import Stock from "highcharts/modules/stock";
import HighchartsVue from "highcharts-vue";
import App from "./App.vue";

Stock(Highcharts);

const app = createApp(App);
app.use(HighchartsVue);
app.mount("#app");

<template>
  <Chart :options="chartOptions" :constructorType="'stockChart'" />
</template>


<script>
import { Chart } from "highcharts-vue";

export default {
  name: "App",
  components: {
    Chart,
  },
  data() {
    return {
      chartOptions: {
        series: [
          {
            data: [5, 2, 3], // sample data
          },
        ],
      },
    };
  },
};
</script>

演示：https://codesandbox.io/s/vue3-highcharts-example-forked-j9nw9t

HighCharts.js - 尝试导入 highstock

HighCharts.js - Trying to import highstock

highcharts

vue.js