使用Vue.js 和Chart.js制作灿艳多彩的图表
深入学习 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()要领。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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 删失，并且引入我们的图表：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<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 中，我们创建了两个变量来生存渐变。代码如下：
1
2
3
4
5
6
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()
给每个渐变创建三个颜色点：
1
2
3
4
5
6
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)‘);
温馨提示: 本文由Jm博客推荐，转载请保留链接: https://www.jmwww.net/file/web/33031.html
![[转]Node.js中package.json中^和~的区别](/uploads/allimg/200519/054J34453_lit.png "[转]Node.js中package.json中^和~的区别")