amcharts3
amcharts3 copied to clipboard
amcharts
Supporting Vue.js
Is there any chance that releasing a amcharts component for vue.js ? Since Angular and React have one.
@wushan We'll consider it. However, nobody on the AmCharts team uses Vue, so we'll have a hard time supporting it.
No, not yet. There are no immediate plans for Vue.js support, I'm afraid.
+1 for Vue support.
Vue currently has 63k+ stars on github and is just about as popular as React and Angular (which you support)
@abelovic I hear you. We are a small team, though, and can't possibly support everything. Vue is on our radar. Even if we don't have immediate plans or resources to implement the support, we might come back to it in the future.
I hope you find this reasonable.
We've just published a tutorial on using amCharts with Vue.js:
https://www.amcharts.com/kbase/using-amcharts-vue-js-webpack/
I know it's not exactly the same as native component, but still might help someone.
@martynasma thanks for the tutorial, but please don't put vue out of your sights. :)
And please don't forget to place it in https://github.com/vuejs/awesome-vue#charts
When I try create a chart by the tutorial, I get some error like this:
TypeError: r.a.makeChart is not a function
@martynasma I am receiving TypeError: __WEBPACK_IMPORTED_MODULE_1_amcharts3___default.a.makeChart is not a function.
@romakov @ekamgit are you just following the tutorial or do you get the error in your own/some more elaborate setup? If the latter, would it be possible for you to share some code so we can investigate?
<div id="chartdiv" style="width: 100%; height: 400px;">`
<script>
import AmCharts from 'amcharts3'
import AmSerial from 'amcharts3/amcharts/serial'
export default {
name: 'app',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
created () {
AmCharts.makeChart("chartdiv",
{
"type": "serial",
"categoryField": "type",
"chartCursor": {},
"graphs": [
{
"type": "column",
"title": "Pizza types",
"valueField": "sold",
"fillAlphas": 0.8
}
],
"dataProvider": [
{ "type": "Margherita", "sold": 120 },
{ "type": "Funghi", "sold": 82 },
{ "type": "Capricciosa", "sold": 78 },
{ "type": "Quattro Stagioni", "sold": 71 }
]
}
);
}
}
</script>
I make component by your guide, but AmCharts is empty object without a 'makeChart' method
@romakov Looks like amCharts package is missing in your project. Are you sure you've installed it from npm?
npm install amcharts/amcharts3 --save
@ailon Yes, I did it many times, but I still get the same error. Let's try do it step by step
@romakov Try to place it inside a this.$nextTick(() => { /* AmCharts.makeChart here */ }).
That is the majority difference between your setup and mine.
The other thing is that I imported AmChart in my main.js, but I don't think this is the case.
In my package.json it is in dependencies as "amcharts3": "github:amcharts/amcharts3"
@abelovic try to change
import AmCharts from 'amcharts3' import AmSerial from 'amcharts3/amcharts/serial'
to
import 'amcharts3' import 'amcharts3/amcharts/serial'
and then use
window.AmCharts.makeChart(...
@martynasma Do u really tried the tutorial? The amcharts3 library doesn't support import/module method. The js file only place AmCharts in global(window) scope.
@quillhon No, I didn't. It was written, verified and reverified by my colleague @ailon. I'm going to leave it here, since I'm not competent to comment on the topic. If you elaborate what you are trying to do, maybe someone in this thread will be able to figure out why it's not working.
@martynasma
- Frustrating that the documentation on your site suggests that amCharts does come with Vue support. At the very least you could update your documentation to inform the world of the true situation.
- I understand that you're close to a v4 release of amCharts, so you're probably prioritising that at the moment. Nevertheless, and ETA would be much appreciated. I would "really" like to use amCharts on my Vue development projects, but without this kind of support may have to find an alternative.
