好资源导航 » 文章资讯 » 使用Vue.js 和Chart.js制作绚丽多彩的图表

使用Vue.js 和Chart.js制作绚丽多彩的图表

2023-08-21 14:00:04 64

前言

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

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

⚡QuickStart

我们需要：

Vue.js
vue-chart.js
vue-cli

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

vueinitwebpackawesome-charts

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

cdawesome-charts&&yarninstall

添加vue-chartjs：

yarnaddvue-chartjs-S

第一个图表

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

touchsrc/components/LineChart.js&&subl.

现在需要从vue-chartjs中引入折线表的基表，创建组件。

在mount()函数中使用我们准备好的数据和选项来调用renderChart()方法。

import{Line}from'vue-chartjs'
exportdefaultLine.extend({
mounted(){
this.renderChart({
labels:['January','February','March','April','May','June','July'],
datasets:[
{
label:'DataOne',
backgroundColor:'#FC2525',
data:[40,39,10,40,39,80,40]
},{
label:'DataTwo',
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脚本，就可以看到图表了。

yarnrundev

把我变得更漂亮

现在该做些美化工作了

返回顶部
514930285
czq8825@qq.com

使用Vue.js 和Chart.js制作绚丽多彩的图表

Linechart

随机推荐

使用Vue.js 和Chart.js制作绚丽多彩的图表

Linechart

热门推荐

随机推荐