Vue 2 Frappe图表 (Vue 2 Frappe Charts)
This is a simple package to get using Frappe Charts within VueJS.
这是在VueJS中使用Frappe Charts的简单软件包。
如何使用 (How to use)
First we need to import and initialize
首先,我们需要导入和初始化
import Vue from 'vue'
import Chart from 'vue2-frappe'
Vue.use(Chart)
Then in our Vue templates:
然后在我们的Vue模板中:
<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>
翻译自: https://vuejsexamples.com/a-simple-wrapper-around-frappe-charts-for-vuejs/