VueJS的Frappe Charts的简单包装

Vue 2 Frappe图表 (Vue 2 Frappe Charts)

This is a simple package to get using Frappe Charts within VueJS.

这是在VueJS中使用Frappe Charts的简单软件包。

View demo 查看演示 Download Source 下载源

如何使用 (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/