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-frappeid="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/

VueJS的Frappe Charts的简单包装相关推荐

Frappe Charts - 免费开源、轻量无依赖的 web 图表库，简单不臃肿，支持搭配 Vue / React 等框架使用
一个小巧的图表库,基于 SVG 生成图表,使用很简单,推荐给大家. 关于 Frappe Charts Frappe Charts 是一个小巧简单的 JavaScript 图表库,通过简单几个参数,可以 ...
android:简单包装实现伪自定义DatePickerDialog和TimePickerDialog
之所以写这个东西,是因为在我们的设计中需要给日期选择器加一个标题,一开始直接使用原生的 DatePickerAlertDialog ,因为他继承自 AlertDialog ,所以就直接调用了 s ...
JFinal model简单包装，版本2
对JFianl的Model 部分进一步的扩展,对QueryParams增加一个方法.今天增加的东西也不是很多.这几天有点懒了吧. 接下来就直接开始讲吧. public Long countSqlRes ...
江小白包装设计原型_江小白，将简单做到极致的包装是品牌传播的先行军
从来没有哪款酒像江小白一样,让消费者又爱又恨.爱的人,将其视为"宠儿",认为酒好喝,微醺有点甜,且文案够扎心:恨的人,对其吐槽不断,认为酒很难喝,一股酒精味,且文案较鸡汤. 作为一 ...
C#操作MySQL数据库的简单例子
其实很简单,但是我在网上找的时候却找不到有用的信息,奇怪. 到这里下载驱动 http://www.mysql.com/products/connector/ 下载的包里面有使用的例子. 需要具备的知识 ...
C++中Future和Promise的一种简单实现
女主宣言由于工作需求,笔者最近在阅读 Pulsar C++ 客户端的实现,发现该客户端虽然是基于 C++11 编写的,但却自己编写了 Future 和 Promise 类,随着阅读的深入,也体会到了 ...
中的listeners_C++中Future和Promise的一种简单实现
女主宣言由于工作需求,笔者最近在阅读 Pulsar C++ 客户端的实现,发现该客户端虽然是基于 C++11 编写的,但却自己编写了 Future 和 Promise 类,随着阅读的深入,也体会到了 ...
学习C++项目——一个基于C++11简单易用的轻量级网络编程框架 1
一个基于C++11简单易用的轻量级网络编程框架一.项目下载.导入.编译和运行现在准备深入学习 C++ ,先肝一个项目,这个项目是<一个基于C++11简单易用的轻量级网络编程框架>, ...
Qt Charts示例
Qt 5.7 有一些变化,把原来商业版的几个模块用GPLv3协议放到了社区版本里: Qt Charts (GPLv3) Qt Data Visualization (GPLv3) Qt Virtual ...

VueJS的Frappe Charts的简单包装

Vue 2 Frappe图表 (Vue 2 Frappe Charts)

如何使用 (How to use)

VueJS的Frappe Charts的简单包装相关推荐

最新文章

热门文章