原文 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-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
把我变得更漂亮
现在该做些美化工作了: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问题解决方法及配置详解