如何在 VueJs2 上使用 Amcharts 3答案

【问题标题】：How to use Amcharts 3 on VueJs2如何在 VueJs2 上使用 Amcharts 3
【发布时间】：2018-07-05 19:32:25
【问题描述】：

我一直在尝试将 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。

到目前为止，我一直在使用 3rd 方库，例如 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'

创建的生命周期钩子中的一个实例：

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"
    },
  });
}

【问题讨论】：

他们可能忘记提到您需要告诉应用程序使用该组件。尝试在 import 语句之后将 Vue.use(AmCharts); 放入 main.js 文件中。

标签： javascript graph vue.js vuejs2 amcharts

【解决方案1】：

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

我测试了项目运行良好。

【讨论】：