Not working with npm
franckysolo opened this issue · comments
hello,
I'am trying to use your plugin in a Vuejs project but i' can't make it work, a error appear :
Cannot read property 'appendChild' of undefined
the error come from your CanvasRenderer class:
var CanvasRenderer = function(el, options) {
var cachedBackground;
var canvas = document.createElement('canvas');
el.appendChild(canvas); // here
The component vue:
<template lang="html">
<div class="easypiechart"
:data-percent="percent" :data-size="size"
:data-bar-color="color" data-scale-color="false"
data-line-cap="round" data-line-width="4"
:style="'width: ' + size + 'px; height: ' + size + 'px;'">
<i :class="icon" class="fa fa-4x" :style="'line-height: ' + size + 'px;'"></i>
<p class="text-uppercase text-lg mt-20 mb-0">
<strong :class="className">{{ count }}</strong>
<small class="text-md text-light text-default lt">{{ title }}</small>
</p>
<p class="text-light">
<i class="fa fa-caret-down text-warning"></i>
{{ percent }}% ce mois-ci
</p>
<canvas :height="size" :width="size"></canvas>
</div>
</template>
<script>
import $ from 'jquery'
$.fn.easyPieChart = require('easy-pie-chart')
export default {
props: ['count', 'percent', 'color', 'title', 'size', 'icon', 'className'],
mounted () {
$('.easypiechart').easyPieChart()
this.$nextTick(() => {
$('.easypiechart').data('easyPieChart').update(this.percent)
})
}
}
</script>
I was having a similar problem. The probable cause is calling .easyPieChart()
on an element which is not a jQuery object. Maybe you should wait for $(document).ready(..)
? (I don't know VueJS so I can't give you exact answer).
In your case I would check the $('.easypiechart')
value.
Aside note: It is possible to import jquery easy-pie-chart with:
import 'easy-pie-chart/dist/jquery.easypiechart';
Which is for me more elegant way of using it.