使用Vue.js 和Chart.js制作绚丽多彩的图表


Posted in Javascript onJune 15, 2019

前言

深入学习 chart.js 的选项来制作漂亮的图表。交互式图表可以给你的数据可视化提供很酷的展示方式。但是大多数开箱即用的解决方案用默认的选项并不能做出很绚丽的图表。

这篇文章中,我会教你如何自定义 chart.js 选项来制作很酷的图表。

⚡ Quick Start

我们需要:

  • Vue.js
  • vue-chart.js
  • vue-cli

使用 vue-cli 来搭基本架构,希望你已经安装好了。我们使用 vue-chart.js 来作为 chart.js 的打包器。

vue init webpack awesome-charts

然后到工程目录中安装依赖:

cd awesome-charts && yarn install

添加 vue-chartjs:

yarn add vue-chartjs -S

第一个图表

现在我们来创建第一个折现表。

touch src/components/LineChart.js && subl .

现在需要从 vue-chartjs 中引入折线表的基表,创建组件。

在 mount() 函数中使用我们准备好的数据和选项来调用 renderChart()方法。

import {Line} from 'vue-chartjs'
export default Line.extend({
mounted () {
this.renderChart({
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'Data One',
backgroundColor: '#FC2525',
data: [40, 39, 10, 40, 39, 80, 40]
},{
label: 'Data Two',
backgroundColor: '#05CBE1',
data: [60, 55, 32, 10, 2, 12, 53]
}
]
}, {responsive: true, maintainAspectRatio: false})
}
})

代码中,使用了一些实例数据和可选参数传递给 chart.js 的数据对象,并且设置 responsive:true,使得图表会充满外层容器。

之所以可以使用 renderChart() 方法是因为我们继承了 BaseChart,这个方法和一些属性都是在 BaseChart 中定义的。

运行 & 测试

ok,现在从 App.vue 中把 Hello.vue 删掉,并且引入我们的图表:

<template>
<div id="app">
<div class="container">
<div class="Chart__list">
<div class="Chart">
<h2>Linechart</h2>
<line-example></line-example>
</div>
</div>
</div>
</div>
</template>
<script>
import LineExample from './components/LineChart.js'
export default {
name: 'app',
components: {
LineExample
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
.container {
max-width: 800px;
margin: 0 auto;
}
</style>
CopyRaw

在终端中运行 dev 脚本,就可以看到图表了。

yarn run dev

把我变得更漂亮

现在该做些美化工作了? ,chart.js 中有很多很酷的技巧。可以传递一个十六进制的颜色数据到backgroundColor,也可以传递 rgba() 值,还可以设置颜色的透明度。chart.js 使用的是 html canvas 来绘图的,所以我们使用 createLinearGradient()。

从这里开始才是有趣的起点,使用它我们需要 canvas 对象。但这事并不难,vue-chartjs 中已经存在一个它的引用。我们可以使用 this.$refs.canvas 来访问。

在 LineChart.js 中,我们创建了两个变量来保存渐变。代码如下:

this.gradient = this.$refs.canvas
.getContext(‘2d')
.createLinearGradient(0, 0, 0, 450)
this.gradient2 = this.$refs.canvas
.getContext(‘2d')
.createLinearGradient(0, 0, 0, 450)

还有另外一个函数可以使用:addColorStop()

给每个渐变创建三个颜色点:

this.gradient.addColorStop(0, ‘rgba(255, 0,0, 0.5)')
this.gradient.addColorStop(0.5, ‘rgba(255, 0, 0, 0.25)');
this.gradient.addColorStop(1, ‘rgba(255, 0, 0, 0)');
this.gradient2.addColorStop(0, ‘rgba(0, 231, 255, 0.9)')
this.gradient2.addColorStop(0.5, ‘rgba(0, 231, 255, 0.25)');
this.gradient2.addColorStop(1, ‘rgba(0, 231, 255, 0)');

现在就可以把 this.gradient 传递给 backgroundColor了,可以得到一个很好看的渐变。为了得到更好的效果,还可以设置 borderColor 的颜色,alpha 设置成 1 (或者用十六进制也行),设置 borderWidth 为 1,另外还可以设置 pointColor。

borderColor: ‘#FC2525', 
pointBackgroundColor: ‘white', 
borderWidth: 1, 
pointBorderColor: ‘white',
import {Line} from 'vue-chartjs'
export default Line.extend({
data () {
return {
gradient: null,
gradient2: null
}
},
mounted () {
this.gradient = this.$refs.canvas.getContext('2d').createLinearGradient(0, 0, 0, 450)
this.gradient2 = this.$refs.canvas.getContext('2d').createLinearGradient(0, 0, 0, 450)
this.gradient.addColorStop(0, 'rgba(255, 0,0, 0.5)')
this.gradient.addColorStop(0.5, 'rgba(255, 0, 0, 0.25)');
this.gradient.addColorStop(1, 'rgba(255, 0, 0, 0)');
this.gradient2.addColorStop(0, 'rgba(0, 231, 255, 0.9)')
this.gradient2.addColorStop(0.5, 'rgba(0, 231, 255, 0.25)');
this.gradient2.addColorStop(1, 'rgba(0, 231, 255, 0)');
this.renderChart({
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
datasets: [
{
label: 'Data One',
borderColor: '#FC2525',
pointBackgroundColor: 'white',
borderWidth: 1,
pointBorderColor: 'white',
backgroundColor: this.gradient,
data: [40, 39, 10, 40, 39, 80, 40]
},{
label: 'Data Two',
borderColor: '#05CBE1',
pointBackgroundColor: 'white',
pointBorderColor: 'white',
borderWidth: 1,
backgroundColor: this.gradient2,
data: [60, 55, 32, 10, 2, 12, 53]
}
]
}, {responsive: true, maintainAspectRatio: false})
}
})

最后一步

最后一步是给 App.vue 的容器添加一些样式。

.Chart {
background: #212733;
border-radius: 15px;
box-shadow: 0px 2px 15px rgba(25, 25, 25, 0.27);
margin: 25px 0;
}
.Chart h2 {
margin-top: 0;
padding: 15px 0;
color: rgba(255, 0,0, 0.5);
border-bottom: 1px solid #323d54;
}

最终结果

最终结果如图:

使用Vue.js 和Chart.js制作绚丽多彩的图表

英文连接:Creating stunning charts with Vue.js and Chart.js

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 用cloneNode方法克隆节点的代码
Oct 15 Javascript
js时钟翻牌效果实现代码分享
Jul 31 Javascript
jquery小火箭返回顶部代码分享
Aug 19 Javascript
jQuery超精致图片轮播幻灯片特效代码分享
Sep 10 Javascript
详解AngularJS中自定义过滤器
Dec 28 Javascript
关于两个jQuery(js)特效冲突的bug的解决办法
Sep 04 Javascript
浅谈JS之tagNaem和nodeName
Sep 13 Javascript
javascript实现根据汉字获取简拼
Sep 25 Javascript
js实现导航吸顶效果
Feb 24 Javascript
express框架实现基于Websocket建立的简易聊天室
Aug 10 Javascript
Vue 仿QQ左滑删除组件功能
Mar 12 Javascript
微信小程序实现比较功能的方法汇总(五种方法)
Mar 07 Javascript
通过实例讲解JS如何防抖动
Jun 15 #Javascript
js笔试题-接收get请求参数
Jun 15 #Javascript
深入了解JavaScript 的 WebAssembly
Jun 15 #Javascript
通过实例了解js函数中参数的传递
Jun 15 #Javascript
RxJS的入门指引和初步应用
Jun 15 #Javascript
js中let能否完全替代IIFE
Jun 15 #Javascript
回顾Javascript React基础
Jun 15 #Javascript
You might like
在PWS上安装PHP4.0正式版
2006/10/09 PHP
PHP chunk_split()函数讲解
2019/02/12 PHP
在thinkphp5.0路径中实现去除index.php的方式
2019/10/16 PHP
利用js跨页面保存变量做菜单的方法
2008/01/17 Javascript
jQuery异步上传文件插件ajaxFileUpload详细介绍
2015/05/19 Javascript
javascript cookie的简单应用
2016/02/24 Javascript
Bootstrap实现input控件失去焦点时验证
2016/08/04 Javascript
完美解决node.js中使用https请求报CERT_UNTRUSTED的问题
2017/01/08 Javascript
原生js实现手风琴功能(支持横纵向调用)
2017/01/13 Javascript
JS中正则表达式全局匹配模式 /g用法详解
2017/04/01 Javascript
基于Vue实现tab栏切换内容不断实时刷新数据功能
2017/04/13 Javascript
[01:07:02]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第三场 2月26日
2021/03/11 DOTA
pygame学习笔记(6):完成一个简单的游戏
2015/04/15 Python
Python中操作符重载用法分析
2016/04/29 Python
Python实现将SQLite中的数据直接输出为CVS的方法示例
2017/07/13 Python
使用TensorFlow实现SVM
2018/09/06 Python
python:接口间数据传递与调用方法
2018/12/17 Python
使用python 写一个静态服务(实战)
2019/06/28 Python
Django 批量插入数据的实现方法
2020/01/12 Python
解决tensorboard多个events文件显示紊乱的问题
2020/02/15 Python
python:批量统计xml中各类目标的数量案例
2020/03/10 Python
Links of London官方网站:英国标志性的珠宝品牌
2017/04/09 全球购物
网络方面基础面试题
2012/11/16 面试题
Linux上比较文件的命令都有哪些
2013/09/28 面试题
给男朋友的道歉信
2014/01/12 职场文书
中年人生感言
2014/02/04 职场文书
心理咨询承诺书
2014/05/20 职场文书
大学生党员承诺书
2014/05/20 职场文书
2014领导班子专题民主生活会对照检查材料思想汇报
2014/09/23 职场文书
工商局局长个人对照检查材料思想汇报
2014/09/23 职场文书
2014高三学生考试作弊检讨书
2014/12/14 职场文书
学生党支部工作总结2015
2015/05/26 职场文书
和谐拯救危机观后感
2015/06/15 职场文书
2015年秋季灭鼠工作总结
2015/07/27 职场文书
HTML中的表单元素介绍
2022/02/28 HTML / CSS
ssh服务器拒绝了密码 请再试一次已解决(亲测有效)
2022/08/14 Servers