小編給大家分享一下如何使用D3.js+Vue實(shí)現(xiàn)柱形圖,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
成都創(chuàng)新互聯(lián)服務(wù)項(xiàng)目包括瀘州網(wǎng)站建設(shè)、瀘州網(wǎng)站制作、瀘州網(wǎng)頁(yè)制作以及瀘州網(wǎng)絡(luò)營(yíng)銷策劃等。多年來(lái),我們專注于互聯(lián)網(wǎng)行業(yè),利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等,向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案,瀘州網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前,我們服務(wù)的客戶以成都為中心已經(jīng)輻射到瀘州省份的部分城市,未來(lái)相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任!
Vue是一款友好的、多用途且高性能的JavaScript框架,使用vue可以創(chuàng)建可維護(hù)性和可測(cè)試性更強(qiáng)的代碼庫(kù),Vue允許可以將一個(gè)網(wǎng)頁(yè)分割成可復(fù)用的組件,每個(gè)組件都包含屬于自己的HTML、CSS、JavaScript,以用來(lái)渲染網(wǎng)頁(yè)中相應(yīng)的地方,所以越來(lái)越多的前端開發(fā)者使用vue。
最近想在Vue的項(xiàng)目里嘗試使用d3.js,封裝一些常用的圖表。這里記錄一下自己搭建項(xiàng)目的過(guò)程,以及實(shí)現(xiàn)一個(gè)簡(jiǎn)單的柱形圖。不了解D3的請(qǐng)移步D3 Data-Driven Documents,它是基于數(shù)據(jù)驅(qū)動(dòng)文檔工作方式的一款JavaScript函數(shù)庫(kù),主要用于網(wǎng)頁(yè)作圖、生成互動(dòng)圖形,是最流行的可視化庫(kù)之一。
說(shuō)明
采用Vue-cli腳手架快速搭建項(xiàng)目
npm 安裝 D3
實(shí)現(xiàn)一個(gè)簡(jiǎn)單的柱形圖
項(xiàng)目搭建
使用vue-cli搭建單頁(yè)應(yīng)用:
# 安裝 vue-cli $ npm install --global vue-cli # 使用 "webpack" 模板創(chuàng)建一個(gè)新項(xiàng)目 $ vue init webpack d3-vue # 安裝依賴,然后開始! $ cd d3-vue $ npm run dev
D3安裝(最新的v5版本):
$ npm install d3 --save
D3引入:
$ import * as d3 from 'd3'
實(shí)現(xiàn)一個(gè)簡(jiǎn)單的圖表
1.在Vue中獲取dom元素
在vue中可以通過(guò)給標(biāo)簽添加ref屬性,然后在js中利用this.$refs去引用它,從而操作該dom元素
<template> <div> <h4>一個(gè)簡(jiǎn)單的圖表</h4> <svg ref="baseBarChart" class="base-bar-chart"></svg> </div> </template> // 省略的代碼... var chartSvg = d3.select(this.$refs.baseBarChart)
2.設(shè)置圖表數(shù)據(jù)
矩形圖主要構(gòu)成部分有矩形、坐標(biāo)軸和文字說(shuō)明,我們需要的數(shù)據(jù)有圖表的數(shù)據(jù)、圖表寬度和矩形寬度
// 設(shè)置圖表數(shù)據(jù),圖表寬度和矩形寬度 var chartData = this.chartData var width = this.width var barHeight = this.barHeight
3.添加畫布
要繪圖,首先需要的是一塊繪圖的畫布。D3提供了眾多的SVG圖形的生成器,我們?cè)谶@里使用SVG畫布。選擇文檔中的svg元素,這里用到了$refs屬性
// 畫布 var chartSvg = d3.select(this.$refs.baseBarChart) .attr('width', width) .attr('height', barHeight * chartData.length)
4.x軸比例尺
d3.scaleLinear(),線性比例尺,將一個(gè)連續(xù)的區(qū)間映射到另一區(qū)間。繪圖時(shí)如果直接根據(jù)給出的數(shù)據(jù)給矩形的寬度賦值,有很大的局限性。比如一組數(shù)據(jù)里有一個(gè)數(shù)值為2000,我們是不可能用2000個(gè)像素來(lái)代表矩形的寬度的,因?yàn)楫嫴紱](méi)有那么長(zhǎng)。這個(gè)時(shí)候我們就需要把某一區(qū)域的值映射到另一區(qū)域,轉(zhuǎn)換的過(guò)程中大小關(guān)系不變。
// x軸比例尺 var xScale = d3.scaleLinear() .domain([0, d3.max(chartData)]) .range([0, width])
5.矩形和label文字的容器,用于添加元素
在有數(shù)據(jù)卻沒(méi)有足夠圖形元素的時(shí)候,可以使用以下鏈?zhǔn)椒椒ㄌ砑幼銐虻脑?
selection.selectAll(element).data(data).enter().append(element) // 矩形和label文字組合的容 var g = chartSvg.selectAll('g') .data(chartData) .enter().append('g') .attr('transform', function (d, i) { return 'translate(0,' + i * barHeight + ')' })
6.添加矩形和label文字
// 添加矩形 g.append('rect') .attr('width', xScale) .attr('height', barHeight - 2) .attr('fill', 'green') // 添加label文字 g.append('text') .attr('x', function (d) { return xScale(d) + 3 }) .attr('y', barHeight - 10) .attr('dy', '0.3em') .attr('fill', 'red') .style('font-size', '12px') .text(function (d) { return d })
繪制后的圖形如下:
使用該組件
怎么使用我們定義好的柱形圖組件呢,分3步走:
1. import導(dǎo)入
2.設(shè)置數(shù)據(jù)
3.通過(guò)屬性值傳遞給子組件
<base-bar-chart :chart-data="barChart.data" :width="barChart.width" :bar-height="barChart.barHeight"></base-bar-chart> import BaseBarChart from '../components/base-bar-chart' export default { name: 'BaseBarChartView', components: { BaseBarChart }, data () { return { barChart: { data: [4, 6, 12, 10, 8, 1, 9], width: 540, barHeight: 20 } } } }
路由配置和數(shù)據(jù)請(qǐng)求
剩下的一部分就是各個(gè)頁(yè)面的vue-router路由配置和主頁(yè)的axios數(shù)據(jù)請(qǐng)求。
以上是“如何使用D3.js+Vue實(shí)現(xiàn)柱形圖”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
網(wǎng)站標(biāo)題:如何使用D3.js+Vue實(shí)現(xiàn)柱形圖
本文鏈接:http://bm7419.com/article42/igdpec.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供定制開發(fā)、網(wǎng)站收錄、關(guān)鍵詞優(yōu)化、響應(yīng)式網(wǎng)站、網(wǎng)站導(dǎo)航、網(wǎng)站制作
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)