JustSteveKing / Vue2 Frappe
Licence: mit
A Vue 2 integration using Frappe Charts
Stars: ✭ 144
Projects that are alternatives of or similar to Vue2 Frappe
Gustavo
👨 A (mostly) headless blogging platform built atop Nuxt & Gist.
Stars: ✭ 131 (-9.03%)
Mutual labels: vue2
163music
🎵163 music web app built with Vue 2.6, server side render, webpack 4
Stars: ✭ 139 (-3.47%)
Mutual labels: vue2
Vue Datatables Net
Vue jQuery DataTables.net wrapper component
Stars: ✭ 119 (-17.36%)
Mutual labels: vue2
Vue Online
A reactive offline indicator component for vue.js
Stars: ✭ 130 (-9.72%)
Mutual labels: vue2
Vuelidate Error Extractor
Vuelidate form-group helper that extracts errors easily.
Stars: ✭ 133 (-7.64%)
Mutual labels: vue2
V Dialogs
A simple and clean instructional dialog plugin for Vue2, dialog type including Modal, Alert, Mask and Toast
Stars: ✭ 121 (-15.97%)
Mutual labels: vue2
Vue.imagesloaded
Vue.js 2.0 directive to detect images loading
Stars: ✭ 134 (-6.94%)
Mutual labels: vue2
Vuetify Swipeout
👆 A swipe out example built with Vue CLI 3 + Vuetify + Swiper.
Stars: ✭ 117 (-18.75%)
Mutual labels: vue2
Vue Ruby China
使用Vue.js框架搭建的ruby china山寨版,集成vue-router+vuex等
Stars: ✭ 113 (-21.53%)
Mutual labels: vue2
Vue Scroll Behavior
Customize the scrolling position on route navigation. Especially hash mode.
Stars: ✭ 132 (-8.33%)
Mutual labels: vue2
Avvw
Apicloud + Vue2 + Vant(有赞前端)+ Webpack4打包,极速开发APP框架,将apicloud的渲染效率和vue数据绑定特性发挥极致!
Stars: ✭ 143 (-0.69%)
Mutual labels: vue2
Vue Element Quick Start
Vue2, Vuex 3, Vue Router 3, Element-ui and Typescript SPA project quick start kit(Vue element ui 快速开始脚手架)
Stars: ✭ 135 (-6.25%)
Mutual labels: vue2
Vue 2 Frappe Charts
This is a simple package to get using Frappe Charts within VueJS
How to use
First we need to import and initialize
import Vue from 'vue'
import Chart from 'vue2-frappe'
Vue.use(Chart)
or use the component directly
import { VueFrappe } from 'vue2-frappe'
export default {
components: {
VueFrappe,
},
};
Then in our Vue templates:
<template>
<vue-frappe
id="test"
:labels="[
'12am-3am', '3am-6am', '6am-9am', '9am-12pm',
'12pm-3pm', '3pm-6pm', '6pm-9pm', '9pm-12am'
]"
title="My Awesome Chart"
type="axis-mixed"
:height="300"
:colors="['purple', '#ffa3ef', 'light-blue']"
:dataSets="this.data">
</vue-frappe>
</template>
<script>
export default {
data () {
return {
data: [{
name: "Some Data", chartType: 'bar',
values: [25, 40, 30, 35, 8, 52, 17, -4]
},
{
name: "Another Set", chartType: 'bar',
values: [25, 50, -10, 15, 18, 32, 27, 14]
},
{
name: "Yet Another", chartType: 'line',
values: [15, 20, -3, -15, 58, 12, -17, 37]
}]
}
}
}
</script>
There are more examples in the examples
directory
Links
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].