如何使用Vue.js和Chart.js制作絢麗多彩的圖表

這篇文章將為大家詳細(xì)講解有關(guān)如何使用Vue.js 和Chart.js制作絢麗多彩的圖表，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

成都創(chuàng)新互聯(lián)專注于企業(yè)成都營銷網(wǎng)站建設(shè)、網(wǎng)站重做改版、尼開遠(yuǎn)網(wǎng)站定制設(shè)計、自適應(yīng)品牌網(wǎng)站建設(shè)、成都h5網(wǎng)站建設(shè)、商城建設(shè)、集團公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)公司、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計等建站業(yè)務(wù)，價格優(yōu)惠性價比高，為尼開遠(yuǎn)等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

js有什么特點

1、js屬于一種解釋性腳本語言；2、在絕大多數(shù)瀏覽器的支持下，js可以在多種平臺下運行，擁有著跨平臺特性；3、js屬于一種弱類型腳本語言，對使用的數(shù)據(jù)類型未做出嚴(yán)格的要求，能夠進行類型轉(zhuǎn)換，簡單又容易上手；4、js語言安全性高，只能通過瀏覽器實現(xiàn)信息瀏覽或動態(tài)交互，從而有效地防止數(shù)據(jù)的丟失；5、基于對象的腳本語言，js不僅可以創(chuàng)建對象，也能使用現(xiàn)有的對象。

? Quick Start

我們需要：

• Vue.js

• vue-chart.js

• vue-cli

使用 vue-cli 來搭基本架構(gòu)，希望你已經(jīng)安裝好了。我們使用 vue-chart.js 來作為 chart.js 的打包器。

vue init webpack awesome-charts

然后到工程目錄中安裝依賴：

cd awesome-charts && yarn install

添加 vue-chartjs：

yarn add vue-chartjs -S

第一個圖表

現(xiàn)在我們來創(chuàng)建第一個折現(xiàn)表。

touch src/components/LineChart.js && subl .

現(xiàn)在需要從 vue-chartjs 中引入折線表的基表，創(chuàng)建組件。

在 mount() 函數(shù)中使用我們準(zhǔn)備好的數(shù)據(jù)和選項來調(diào)用 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})
}
})

代碼中，使用了一些實例數(shù)據(jù)和可選參數(shù)傳遞給 chart.js 的數(shù)據(jù)對象，并且設(shè)置 responsive:true，使得圖表會充滿外層容器。

之所以可以使用 renderChart() 方法是因為我們繼承了 BaseChart，這個方法和一些屬性都是在 BaseChart 中定義的。

運行 & 測試

ok，現(xiàn)在從 App.vue 中把 Hello.vue 刪掉，并且引入我們的圖表：

<template>
<div id="app">
<div class="container">
<div class="Chart__list">
<div class="Chart">
<h3>Linechart</h3>
<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

把我變得更漂亮

現(xiàn)在該做些美化工作了? ，chart.js 中有很多很酷的技巧。可以傳遞一個十六進制的顏色數(shù)據(jù)到backgroundColor，也可以傳遞 rgba() 值，還可以設(shè)置顏色的透明度。chart.js 使用的是 html canvas 來繪圖的，所以我們使用 createLinearGradient()。

從這里開始才是有趣的起點，使用它我們需要 canvas 對象。但這事并不難，vue-chartjs 中已經(jīng)存在一個它的引用。我們可以使用 this.$refs.canvas 來訪問。

在 LineChart.js 中，我們創(chuàng)建了兩個變量來保存漸變。代碼如下：

this.gradient = this.$refs.canvas
.getContext(‘2d')
.createLinearGradient(0, 0, 0, 450)
this.gradient2 = this.$refs.canvas
.getContext(‘2d')
.createLinearGradient(0, 0, 0, 450)

還有另外一個函數(shù)可以使用：addColorStop()

給每個漸變創(chuàng)建三個顏色點：

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)');

現(xiàn)在就可以把 this.gradient 傳遞給 backgroundColor了，可以得到一個很好看的漸變。為了得到更好的效果，還可以設(shè)置 borderColor 的顏色，alpha 設(shè)置成 1 （或者用十六進制也行），設(shè)置 borderWidth 為 1，另外還可以設(shè)置 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 h3 {
margin-top: 0;
padding: 15px 0;
color: rgba(255, 0,0, 0.5);
border-bottom: 1px solid #323d54;
}

最終結(jié)果

最終結(jié)果如圖：

關(guān)于“如何使用Vue.js 和Chart.js制作絢麗多彩的圖表”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

網(wǎng)站題目：如何使用Vue.js和Chart.js制作絢麗多彩的圖表
URL分享：http://bm7419.com/article44/igejhe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供Google、商城網(wǎng)站、網(wǎng)站設(shè)計公司、電子商務(wù)、、自適應(yīng)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)