博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
使用 Vue.js 和 Chart.js 制作绚丽多彩的图表
阅读量:5846 次
发布时间:2019-06-18

本文共 3873 字,大约阅读时间需要 12 分钟。

本文作者:Jakub Juszczak 

编译:

翻译原文: 

英文连接:

转载请注明出处,保留原文链接以及作者信息

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

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

⚡ Quick Start

我们需要:

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

vue init webpack awesome-charts

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

cd awesome-charts && yarn install

添加 :

yarn add vue-chartjs -S

第一个图表

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

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

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

在 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 删掉,并且引入我们的图表:

CopyRaw

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

yarn run dev

把我变得更漂亮

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

从这里开始才是有趣的起点,使用它我们需要 canvas 对象。但这事并不难, 中已经存在一个它的引用。我们可以使用 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)

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

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

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; }

最终结果

最终结果如图:

转载于:https://www.cnblogs.com/Unknw/p/6689221.html

你可能感兴趣的文章
A2SD 命令集
查看>>
实例:Linux EXT3文件系统下成功恢复误删的文件[原创]
查看>>
盘点5款Ubuntu监控工具解决CPU暴增问题
查看>>
linux_定时任务
查看>>
Xorg <= 1.10 remote root 0day exploit (32-bit x86)
查看>>
2010下半年网络规划设计师上午试卷、标准参考答案及分析(1)
查看>>
szshunjia储存不干胶标签的心得简述分享
查看>>
最近几年做软件项目的心得总结
查看>>
10个网页设计师必备的CSS技巧(转)
查看>>
我的友情链接
查看>>
我的友情链接
查看>>
oneinstack增加fileinfo扩展
查看>>
java 获取指定日期为星期几的代码
查看>>
Myeclipse连接Mysql数据库
查看>>
Entity Framework 4 in Action读书笔记——第五章:域模型映射(Domain model mapping)(二)...
查看>>
dnspod批量更新添加激活DNS解析【python脚本】
查看>>
C语言中system和exec的本质区别
查看>>
SCCM 2007 客户端疑难解析(一)
查看>>
MFC图像处理-图像扫描显示之绘制基本窗口
查看>>
通过实例让你真正明白mapreduce---填空式、分布(分割)编程
查看>>