本文介绍如何在Vue.js项目中利用vue-chartjs库创建自定义样式的Chart.js图表。通过获取Canvas上下文创建线性渐变，并配置backgroundColor、borderColor等属性，实现比默认样式更绚丽的数据可视化效果。
前言
前言
深入掌握 Chart.js 的配置选项，有助于制作视觉效果出色的图表。交互式图表能为数据展示增添亮点，但大多数开箱即用的默认方案往往无法呈现出令人惊艳的视觉效果。
本文将指导你如何自定义 Chart.js 的配置项，以创建引人注目的图表效果。
快速开始
⚡ 快速开始
我们需要准备以下工具和依赖：
- Vue.js
- vue-chartjs
- vue-cli
使用 vue-cli 搭建基础项目架构，假设你已经安装好相关环境。我们将使用 vue-chartjs 作为 Chart.js 在 Vue 中的封装库。
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 中引入折线图的基类组件，并创建相应的 Vue 组件。
在组件的 mounted() 生命周期钩子中，使用准备好的数据和配置项调用 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 中。
运行与测试
运行 & 测试
好的，现在从 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 中的容器添加一些 CSS 样式。
.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;
}最终结果
最终效果如图所示：
英文连接：Creating stunning charts with Vue.js and Chart.js
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。