javascript - 如何在 VueJs2 上使用 Amcharts 3

Question

我一直在尝试将 Amcharts 3 与 VueJS 结合使用。

我已经尝试了以下帖子中的所有内容

https://www.amcharts.com/kbase/using-amcharts-vue-js-webpack/

问题来自 AmCharts.makeChart(...)，它说它没有定义，所以我想它没有检测到 AmCharts 实例。 还尝试了另一个 npm 包安装

npm install amcharts3

代替

npm install amcharts/amcharts3 --save

来自链接。

我也尝试过使用 vue-charts 和同样的问题，如果我使用来自 vanilla js 的 cdn 我可以使用它们但不能让它们与 vue 一起工作。我唯一可以使用的第 3 方图形库是 ChartistJS。

我一直在使用第 3 方库，直到现在都没有问题，例如 moment js 和其他库，但我在图形库上遇到了很多困难。

我的问题是，是否有人有关于如何正确使用 Amchart 和 VueJS 的示例，或者是否有人知道我可以使用的任何类似库/模块？

这是我的代码(来自链接):

<template>
<div id="app">
<img src="./assets/logo.png">
<h1>{{ msg }}</h1>
</template>

<div id="chartdiv" style="width: 100%; height: 400px;"></div>

<h2>Essential Links</h2>
</div>
</template>

进口:

import AmCharts from 'amcharts3'
import AmSerial from 'amcharts3/amcharts/serial'

创建的生命周期钩子(Hook)中的一个实例:

created() {
  AmCharts.makeChart("chartdiv", {
    type: "serial",
    pathToImages: "../amcharts/images/",
    dataProvider: "kñe",
    categoryField: "date",
    categoryAxis: {
      parseDates: true,
      minPeriod: "ss"
    },
    graphs: [{
      valueField: "value",
      bullet: "round"
    }],
    chartCursor: {
      cursorPosition: "mouse"
    },
  });
}

Answer 1

我无法分析您的代码以了解您在何处导入了 amcharts 模块。但是我初始化了一个包含 vuejs 代码的存储库来使用 Amcharts。 Go here to clone the repository for amchart running code .

我测试了项目运行良好。