用Vue.js和Chart.js制作彩色图表

前言

学习chart.js的选项制作漂亮的图表。交互式图表可以提供一种很酷的方式来可视化您的数据。然而，大多数现成的解决方案无法用默认选项制作出色的图表。

在本文中，我将教你如何定制chart.js选项来制作酷炫的图表。

快速启动

我们需要：

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

vue init网络包棒极了——图表

然后在项目目录中安装依赖项：

cd awesome-charts纱线安装

添加vue-chartjs:

纱线添加

第一张图表

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

触摸src/components/LineChart . js subl。

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

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

从“vue-chartjs”导入{Line}导出默认Line . extend({ mounted(){ this . renderchart({ labels :[' 1月'，' 2月'，' 3月'，' 4月'，' 5月'，' 6月'，' 7月'])，dataset :[{ label : ' Data One '，backgroundColor: '#FC2525 '，data: [40，39，10，40，39，80，40]}，{ label 3: ' Data

可以使用renderChart()方法，因为我们继承了BaseChart，并且这个方法和一些属性是在BaseChart中定义的。

运行测试

好了，现在从App.vue中删除Hello.vue，介绍我们的图表：

template div id=' app ' div class=' container ' div class=' Chart _ _ list ' div class=' Chart ' H2 line Chart/H2 line-example/line-example/div/div/div/div/templatescript import line example from '。/components/linechart . js ' export default { name : ' app '，components 3360 { line example } }/script style # app { font-family : ' Avenir '，Helvetica，Arial，sans-serif；-web kit-font-smooth :抗锯齿；-moz-OSX-font-smooth :灰度；文本对齐：中心；color : # 2c 3e 50；边距-top : 60px；}.容器{最大宽度： 800 px；margin: 0 auto}/styleCopyRaw在终端运行dev脚本，可以看到图表。

纱线运行开发

让我更美丽

现在是时候做一些美化了。chart.js中有很多很酷的技术，你可以把一个十六进制的颜色数据传递给backgroundColor，或者rgba()值，或者设置颜色的透明度。Chart.js使用html画布进行绘制，所以我们使用createLinearGradient()。

这就是有趣的出发点。要使用它，我们需要画布对象。但这并不难。vue-chartjs中已经有对它的引用。我们可以用这个。$refs.canvas来访问它。

在LineChart.js中，我们创建了两个变量来保存渐变。代码如下：

这个。梯度=这个。$ refs.canvas.getcontext ('2d ')。createlineargradient (0，0，0，450)这个。gradient2=这个。$ refs.canvas.getcontext ('2d ')。createlineargradient (0，0，0，

为每个渐变创建三个色点：

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 . gradient 2 . AddColorStop(0.5，' rgba(0，231，255，0.25)')；this.gradient2.addColorStop(1，' rgba(0，231，255，0)')；现在你可以把这个渐变传递给backgroundColor，你可以得到一个很好的渐变。为了获得更好的效果，还可以设置borderColor的颜色。alpha设置为1(或十六进制)，borderWidth设置为1，还可以设置pointColor。

borderColor: '#FC2525 '，pointbackgroundcolor : '白色'，borderWidth: 1，pointBorderColor: '白色'，从vue-chartjs '导入{Line}导出默认排队。extend({ data(){ return { gradient : null，gradient2: null}}，mounted () {this.gradient=this .$refs.canvas.getContext('2d ').createlinegradient(0，0，0，450)this.gradient2=this .$refs.canvas.getContext('2d ').createlinegradient(0，0，0，450)这个。梯度。addcolorstop(0，' rgba(255，0，0，0.5)')这个。梯度。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。梯度2。AddColorStop(0.5，' rgba(0，231，255，0.25)')；this.gradient2.addColorStop(1，' rgba(0，231，255，0)')；this.renderChart({labels: ['一月','二月','三月','四月','五月','六月','七月)，数据集：[{ label : ' Data One '，borderColor: '#FC2525 '，pointbackground color : ' white '，borderWidth: 1，pointBorderColor: 'white '，背景色： this。等级，数据3:[40，39，10最后一步

最后一步是给App.vue的容器添加一些样式。图表{ background : # 212733 border-radius : 15px；盒影： 0px 2px 15px rgba(25，25，25，0.27)；边距： 25px 0；}.图表H2 {保证金-最高： 0；padd : 15px 0；color: rgba(255，0，0，0.5)；边框-bottom: 1px实心# 323d54}最终结果

最终结果如图：

英文连接：使用Vue.js和图表. js创建惊艳的图表

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。