热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

深入学习Vue.js和chart.js来制作漂亮的图表

本文标签:Vue.jschart.jsApp.vue原文http:huziketang.comblogpostsdetail?postId58e5e0e1a58c240ae35bb8

本文标签: Vue.jschart.jsApp.vue

原文  http://huziketang.com/blog/posts/detail?postId=58e5e0e1a58c240ae35bb8e0

本文作者:Jakub Juszczak编译: 胡子大哈

翻译原文: http://huziketang.com/blog/posts/detail?postId=58e5e0e1a58c240ae35bb8e0 英文连接:Creating stunning charts with Vue.js and Chart.js

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

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

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

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






CopyRaw

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

yarn run dev

把我变得更漂亮

现在该做些美化工作了:lipstick: ,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;
}

最终结果

最终结果如图:

Happy Coding!如果本文对你有帮助,欢迎关注我的专栏- 前端大哈 ,定期发布高质量前端文章。

我最近正在写一本《React.js 小书》,对 React.js 感兴趣的童鞋,欢迎指点。

写在最后:FOR Freedom 看看外边的世界,以及IT这一行,少不了去Google查资料,最后,安利一个加速器代理。一枝红杏 加速器,去Google查资料是绝对首选,连接速度快,使用也方便。我买的是99¥一年的,通过这个链接(http://whosmall.com/go/yzhx)注册后输上优惠码wh80,终身85折 ,平摊下来,每月才7块钱,特实惠。

本文标签: Vue.jschart.jsApp.vueGoogle

转自 SUN'S BLOG - 专注互联网知识,分享互联网精神!

原文地址: 深入学习Vue.js和 chart.js 来制作漂亮的图表

相关阅读:GIT能做什么、它和SVN在深层次上究竟有什么不同

相关阅读:分享一些对开发者最有用的、用户友好和功能丰富的Google Chrome扩展工具

相关阅读:分享一些实际Android开发过程中很多相见恨晚的工具或网站

相关阅读:我是 G 粉,一直关注 Google,最近 Google 有一些小动作,可能很多人不太了解

相关阅读:机器学习引领认知领域的技术创新,那么SaaS行业会被机器学习如何改变?

相关阅读:VPS 教程系列:Dnsmasq + DNSCrypt + SNI Proxy 顺畅访问 Google 配置教程

相关阅读: 对程序员有用:2017最新能上Google的hosts文件下载及总结网友遇到的各种hosts问题解决方法及配置详解

相关BLOG:SUN’S BLOG- 专注互联网知识,分享互联网精神!去看看:www.whosmall.com

原文地址:http://whosmall.com/?post=373


推荐阅读
  • 本文深入探讨了 Vue.js 中异步组件的应用与优化策略。首先,文章介绍了异步组件的基本概念及其在现代前端开发中的重要性。为了确保最佳实践,建议使用 Webpack 作为模块打包工具,因为 Browserify 默认不支持异步组件的加载。接着,详细解释了异步组件的使用方法,并提供了官方文档的相关链接以供参考。此外,文章还讨论了多种优化技巧,包括代码分割、懒加载和性能调优,以提升应用的整体性能和用户体验。 ... [详细]
  • 基于Node.js、EJSExcel、Express与Vue.js构建Excel转JSON工具:首阶段——Vue.js项目初始化及开发环境配置
    在近期的一个H5游戏开发项目中,需要将Excel数据转换为JSON格式。经过调研,市面上缺乏合适的工具满足需求。因此,决定利用Node.js、EJSExcel、Express和Vue.js自行构建这一工具。本文主要介绍项目的第一阶段,即Vue.js项目的初始化及开发环境的配置过程,详细阐述了如何搭建高效的前端开发环境,确保后续功能开发的顺利进行。 ... [详细]
  • 微信支付授权目录配置详解及操作步骤
    在使用微信支付时,若通过WeixinJSBridge.invoke方法调用支付功能,可能会遇到“当前页面URL未注册”的错误提示,导致get_brand_wcpay_request:fail调用微信JSAPI支付失败。为解决这一问题,需要正确配置微信支付授权目录,确保支付页面的URL已成功注册。本文将详细介绍微信支付授权目录的配置步骤和注意事项,帮助开发者顺利完成支付功能的集成与调试。 ... [详细]
  • 为了优化直播应用底部聊天框的弹出机制,确保在不同设备上的布局稳定性和兼容性,特别是在配备虚拟按键的设备上,我们对用户交互流程进行了调整。首次打开应用时,需先点击首个输入框以准确获取键盘高度,避免直接点击第二个输入框导致的整体布局挤压问题。此优化通过调整 `activity_main.xml` 布局文件实现,确保了更好的用户体验和界面适配。 ... [详细]
  • SQLmap自动化注入工具命令详解(第28-29天 实战演练)
    SQL注入工具如SQLMap等在网络安全测试中广泛应用。SQLMap是一款开源的自动化SQL注入工具,支持12种不同的数据库,具体支持的数据库类型可在其插件目录中查看。作为当前最强大的注入工具之一,SQLMap在实际应用中具有极高的效率和准确性。 ... [详细]
  • IIS配置大全:从基础到高级的全面指南
    IIS配置详解:从基础到高级的全面指南IIS前端配置与web.config文件紧密相关,相互影响。本文详细介绍了如何设置允许通过的HTTP请求方法,包括HEAD、POST、GET、TRACE和OPTIONS。提供了两种主要的配置方法,并探讨了它们在实际应用中的优缺点。此外,还深入讲解了其他高级配置选项,帮助读者全面提升IIS服务器的性能和安全性。 ... [详细]
  • 浏览器中 W3School JavaScript 的 Location 对象详解
    Location对象是浏览器Window对象的一部分,通过`window.location`属性可访问。它包含了当前页面URL的相关信息,如协议、主机名、路径和查询参数等,对于页面导航和URL操作非常有用。 ... [详细]
  • 根据不同环境需求,利用 Vue CLI 的 `npm run build` 命令对项目进行定制化打包,如测试、预发布和生产环境。通过配置 `process.env` 变量,实现不同环境下接口和服务的动态切换,确保应用在各阶段都能高效运行和调试。 ... [详细]
  • 在本文中,我们将探讨如何使用 UniApp 封装小程序 API 请求接口的最佳实践。通过创建 `request.js` 文件,定义基础 URL 并传入后端提供的 URL 作为请求参数。同时,配置请求方法(如 GET、POST)和请求头(例如包含 token 的认证信息),以实现高效、安全的 API 调用。此外,我们还将介绍如何处理请求和响应的错误,以及如何优化请求性能,确保应用在不同平台上的兼容性和稳定性。 ... [详细]
  • Django框架进阶教程:掌握Ajax请求的基础知识与应用技巧
    本教程深入探讨了Django框架中Ajax请求的核心概念与实用技巧,帮助开发者掌握异步数据交互的方法,提升Web应用的响应速度和用户体验。通过实例解析,详细介绍了如何在Django项目中高效实现Ajax请求,涵盖从基础配置到复杂场景的应用。 ... [详细]
  • Linux学习精华:程序管理、终端种类与命令帮助获取方法综述 ... [详细]
  • 随着越来越多的应用程序采用JSON格式作为响应数据,基于Spring Framework构建的服务端应用也广泛采用了这一实践。本文将详细介绍如何在Spring 4.x版本的MVC框架中配置和实现HTTP请求返回JSON数据流,涵盖相关配置、依赖管理和代码示例,帮助开发者高效地实现这一功能。 ... [详细]
  • 在处理大文件上传时,服务端为何无法直接接收?这主要与 PHP 配置文件 `php.ini` 中的几个关键参数有关,如 `upload_max_filesize` 和 `post_max_size`。这些参数分别限制了单个文件的最大上传大小和整个 POST 请求的数据量。为了实现大文件的高效上传,可以通过文件分割与分片上传的方法来解决。本文将详细介绍这一实现方法,并提供相应的代码示例,帮助开发者更好地理解和应用这一技术。 ... [详细]
  • Vue 中实现组件强制重新渲染的有效策略及 eltab 内容更新问题解决方案
    在 Vue 中,仅依靠响应式机制更新数据有时并不足以实现预期效果,此时需要采取手动重新渲染组件的方法来确保数据的实时更新。特别是在处理 `el-tab` 组件内容更新的问题时,通过强制重新渲染可以有效解决数据不同步的情况,从而提升用户体验。此外,还可以结合 Vue 的生命周期钩子和自定义指令,进一步优化组件的渲染性能。 ... [详细]
  • 2017-09-07前端日报精选JavaScriptEventLoop机制详解与Vue.js中实践应用Redux基础与实践如何用js获取虚拟键盘高度?( ... [详细]
author-avatar
小群群zheng
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有