轻量级图表组件 -- vue2-frappe
当遇到需要在网页上绘制图表的场景时,一般会使用两个库:D3.js 和 Chart.js 。但其实你根本不需要这么重量级的库。有时候你只希望使用简单的 SVG 图表就能满足你的需求,这时候你可以使用 Frappe Charts 。它是一个能提供全功能、交互式动画的轻量级图表,并配合上简单的组件包装器,你就可以与 Vue.js 一起使用了!
开始安装
开始安装组件 vue2-frappe
,这里我假设你是在现有的一个 Vue.js 项目上工作:
$ npm install --save vue2-frappe
下一步注册组件:
import Vue from 'vue';
import VueFrappe from 'vue2-frappe';
import App from './App.vue';
Vue.use(VueFrappe);
new Vue({
el: '#app',
render: h => h(App)
});
开始绘制图表
vue2-frappe
是基于 Frappe Charts 之上的一个层,将其封装为可用 Vue.js 使用的组件,更多使用请见 Frappe Chart 的文档 :
<template>
<div id="app">
<h2>Chart: Benedict's Weight</h2>
<!-- id - 每一个图表必须有一个 id. -->
<!-- title - 图表上方显示的标题 -->
<!-- type - 图表的类型 线性图、饼图、条形图、等 -->
<!-- labels - x 轴上的值 -->
<!-- height- 可选,图表的高度 -->
<!-- colors - 将每一个数据集进行颜色区分 -->
<!-- lineOptions - 线形图的更多选项,请见文档-->
<!-- datasets - 数据集,对象数组 -->
<vue-frappe
id="my-chart-id"
title="Benedict's Weight From 2017-2018 (lbs)"
type="line"
:labels="['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']"
:height="650"
:colors="['#008F68', '#FAE042']"
:lineOptions="{regionFill: 1}"
:datasets="[
{name: '2017', values: benedictsWeight2017},
{name: '2018', values: benedictsWeight2018}
]"
></vue-frappe>
<p>Conclusion: Benedict needs to go on a diet.</p>
</div>
</template>
<script>
export default {
name: 'app',
data() {
return {
benedictsWeight2017: [480, 485, 491, 489, 485, 490, 497, 510, 512, 521, 530, 545],
benedictsWeight2018: [540, 575, 570, 555, 572, 580, 585, 587, 588, 590, 592, 590]
}
}
}
</script>
上面将输出一个类似于以下的图表:
Frappe Charts 支持各式各样的图标,如饼图、条线图、比例图、热图等,更多高级的显示选项,请见其 官方文档!
本文中的所有译文仅用于学习和交流目的,转载请务必注明文章译者、出处、和本文链接
我们的翻译工作遵照 CC 协议,如果我们的工作有侵犯到您的权益,请及时联系我们。
推荐文章: