使用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 相关文章推荐
Jquery 实现Tab效果 思路是js思路
Mar 02 Javascript
使用jquery实现select添加实现后台权限添加的效果
May 28 Javascript
FireBug 调试JS入门教程 如何调试JS
Dec 23 Javascript
JS在可编辑的div中的光标位置插入内容的方法
Nov 20 Javascript
AngularJs ng-route路由详解及实例代码
Sep 14 Javascript
bootstrap datepicker限定可选时间范围实现方法
Sep 28 Javascript
js通过keyCode值判断单击键盘上某个键,然后触发指定的事件方法
Feb 19 Javascript
bootstrap datepicker插件默认英文修改为中文
Jul 28 Javascript
Webpack性能优化 DLL 用法详解
Aug 10 Javascript
Vue中的组件及路由使用实例代码详解
May 22 Javascript
浅谈JavaScript 声明提升
Sep 14 Javascript
Vue实现简单的留言板
Oct 23 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
PHP页面间传递参数实例代码
2008/06/05 PHP
dedecms系统的广告设置代码 基础版本
2010/04/09 PHP
如何使用PHP获取指定日期所在月的开始日期与结束日期
2013/08/01 PHP
php Calender(日历)代码分享
2014/01/03 PHP
PHP实现中国公民身份证号码有效性验证示例代码
2017/05/03 PHP
laravel高级的Join语法详解以及使用Join多个条件
2019/10/16 PHP
在 Laravel 6 中缓存数据库查询结果的方法
2019/12/11 PHP
firefox firebug中文入门教程 脚本之家新年特别版
2010/01/02 Javascript
Textbox控件注册回车事件及触发按钮提交事件具体实现
2013/03/04 Javascript
简洁Ajax函数处理(示例代码)
2013/11/15 Javascript
jQuery+ajax中getJSON() 用法实例
2014/12/22 Javascript
jquery日历插件datepicker用法分析
2016/01/22 Javascript
jQuery使用ajax方法解析返回的json数据功能示例
2017/01/10 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(上)
2017/04/21 Javascript
jquery平滑滚动到顶部插件使用详解
2017/05/08 jQuery
详解基于angular-cli配置代理解决跨域请求问题
2017/07/05 Javascript
jQuery实现动态加载select下拉列表项功能示例
2018/05/31 jQuery
vue生命周期实例小结
2018/08/15 Javascript
layui多iframe页面控制定时器运行的方法
2019/09/05 Javascript
VUE和Antv G6实现在线拓扑图编辑操作
2020/10/28 Javascript
python实现数独算法实例
2015/06/09 Python
python实现可以断点续传和并发的ftp程序
2016/09/13 Python
python实现将一维列表转换为多维列表(numpy+reshape)
2019/11/29 Python
python MD5加密的示例
2020/10/19 Python
python 实现汉诺塔游戏
2020/11/28 Python
python实现图像高斯金字塔的示例代码
2020/12/11 Python
Madewell澳大利亚官方网站:美国休闲服饰品牌
2019/07/18 全球购物
大四本科生的自我评价
2013/12/30 职场文书
运动会通讯稿100字
2014/01/31 职场文书
网管求职信
2014/03/03 职场文书
社区活动总结报告
2014/05/05 职场文书
课例研修方案
2014/05/31 职场文书
pytorch查看网络参数显存占用量等操作
2021/05/12 Python
基于Java的MathML转图片的方法(示例代码)
2021/06/23 Java/Android
【海涛教你打dota】体验一超神发条:咱是抢盾专业户
2022/04/01 DOTA
Vue3实现简易音乐播放器组件
2022/08/14 Vue.js