Vue Radial Chart
Vue Radial Chart WIP
Abstract
The component aims to integrate a dynamic radial chart
The component allow to :
- display an array of object
- animate change of the array
- export the chart as base64 image
Table of contents
Software dependencies
Vue Radial Chart
- d3 (https://github.com/d3/d3)
- gsap (https://github.com/greensock/GreenSock-JS)
- vue (https://github.com/vuejs/vuejs.org)
Use
Install component
npm i vue-chart-radial --save
Import component in your vue file
please refer to data and option property after this section
<template>
<div>
<vue-radial-chart :options="options" :data="data"></vue-radial-chart>
</div>
</template>
<script>
import VueRadialChart from 'vue-radial-chart'
export default {
name: 'dummy',
components: {
VueRadialChart
},
data () {
return {
options : `...`,
data: `...`
}
}
}
</script>
Props
-
data format
data: { "todo" }
-
options for customization not mandatory
options: { "todo" }
Dev Setup
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm start
# build package component for production
npm run build
# publish npm package
npm version patch
npm publish --access public
For a detailed explanation on how things work, check out the d3 and gsap documentation.