Как использовать Amcharts 3 на VueJs2 - PullRequest
Новая
       10

Как использовать Amcharts 3 на VueJs2

0 голосов
/ 05 июля 2018

Я пытался использовать 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 и та же проблема, я могу использовать их, если использую cdn из vanilla js, но не могу заставить их работать с vue. Единственная сторонняя графическая библиотека, которую я могу сделать, - это ChartistJS.

Я использую сторонние библиотеки без проблем до сих пор, такие как момент 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"
    },
  });
}

1 Ответ

0 голосов
/ 05 июля 2018

Я не могу проанализировать ваш код, чтобы узнать, куда вы импортировали модуль amcharts. Но я инициализировал репозиторий, содержащий код vuejs для использования Amcharts. Перейдите сюда, чтобы клонировать репозиторий для кода выполнения amchart .

Я проверил, что проект работает нормально. this is amcharts image

...