vue怎麼設定會增長的條柱-前端問答-PHP中文網

前言

在資料視覺化中，長條圖是非常常見的一種圖表類型。而在Vue框架中，如何實現一種可以成長的長條圖呢？本篇文章將介紹如何使用Vue和一些其他的函式庫實現一個逐步成長的長條圖。

步驟一：安裝必要的函式庫

在使用Vue開發應用程式時，我們可以選擇使用一些第三方的函式庫來輔助我們開發。例如，在本篇文章中，我們使用的資料視覺化函式庫是D3.js，用來繪製圖表的函式庫是vx（基於D3.js實作），那麼首先，我們需要在專案中安裝這兩個函式庫。

1.使用npm安裝

我們可以使用npm工具來安裝這兩個函式庫，依序執行以下指令：

npm install d3
npm install vx

登入後複製

2.使用cdn引入

我們也可以透過在<script></script>中引入以下兩個cdn的方式來使用：

<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://unpkg.com/@vx/group"></script>

登入後複製

步驟二：資料準備

在繪製圖表之前，我們需要先準備好數據。而在本次範例中，我們準備了一個簡單的物件數組，每個物件包含兩個屬性，具體如下：

const data = [
  { name: 'A', value: 50 },
  { name: 'B', value: 70 },
  { name: 'C', value: 90 },
  { name: 'D', value: 30 },
  { name: 'E', value: 80 }
]

登入後複製

其中，name屬性表示每一個條柱的名稱，value屬性表示每一個條柱的高度。

步驟三：繪製容器

在Vue中使用SVG影像繪製圖表時，首先需要建立一個容器。在本次範例中，我們將使用svg元素作為容器，並且設定必要的高度和寬度，程式碼如下：

<template>
  <div>
    <svg :height="height + margin.top + margin.bottom" :width="width + margin.left + margin.right">
      <g :transform="`translate(${margin.left}, ${margin.top})`">
        <!-- 绘制图表 -->
      </g>
    </svg>
  </div>
</template>

<script>
export default {
  data() {
    return {
      height: 200, // 容器高度
      width: 300, // 容器宽度
      margin: { top: 10, right: 10, bottom: 10, left: 10 } // 容器边距
    }
  }
}
</script>

登入後複製

步驟四：繪製條柱

接下來，我們就可以透過資料繪製每一個條柱。在這個例子中，我們需要繪製的是一個逐步成長的長條圖，所以每一次繪製都需要根據目前值來更新條柱的高度。

首先，我們按照以下程式碼來繪製初始的條柱：

const barWidth = 20 // 条柱宽度
const groupSpace = 10 // 条柱组间距
const maxBarHeight = height - margin.top - margin.bottom // 最大条柱高度
const xScale = d3.scaleBand()
  .domain(data.map(d => d.name))
  .range([0, width - margin.left - margin.right - (groupSpace + barWidth) * (data.length - 1)])
  .paddingInner(0.1)
const yScale = d3.scaleLinear()
  .domain([0, d3.max(data, d => d.value)])
  .range([maxBarHeight, 0])
const bars = d3.select(this.$el.querySelector('g'))
  .selectAll('.bar')
  .data(data)
  .enter()
  .append('rect')
  .attr('class', 'bar')
  .attr('x', d => xScale(d.name))
  .attr('y', d => yScale(d.value))
  .attr('height', d => maxBarHeight - yScale(d.value))
  .attr('width', barWidth)
  .attr('fill', 'blue')

登入後複製

在上述程式碼中，我們透過D3.js來計算出每一個條柱的位置和高度，並使用rect元素繪製每一個條柱，初始高度為資料中的value屬性。

接著，我們需要使用Vue的生命週期函數中的updated函數來實現條柱高度的逐步成長。具體實現如下：

<script>
export default {
  data() {
    return {
      // 同上
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.createChart()
    })
  },
  updated() {
    const t = d3.transition().duration(1000)
    const maxBarHeight = this.height - this.margin.top - this.margin.bottom
    const yScale = d3.scaleLinear()
      .domain([0, d3.max(this.data, d => d.value)])
      .range([maxBarHeight, 0])
    const bars = d3.select(this.$el.querySelector('g'))
      .selectAll('.bar')
      .data(this.data)
    bars.transition(t)
      .attr('y', d => yScale(d.value))
      .attr('height', d => maxBarHeight - yScale(d.value))
  },
  methods: {
    createChart() {
      const barWidth = 20
      const groupSpace = 10
      const maxBarHeight = this.height - this.margin.top - this.margin.bottom
      const xScale = d3.scaleBand()
        .domain(this.data.map(d => d.name))
        .range([0, this.width - this.margin.left - this.margin.right - (groupSpace + barWidth) * (this.data.length - 1)])
        .paddingInner(0.1)
      const yScale = d3.scaleLinear()
        .domain([0, d3.max(this.data, d => d.value)])
        .range([maxBarHeight, 0])
      const bars = d3.select(this.$el.querySelector('g'))
        .selectAll('.bar')
        .data(this.data)
        .enter()
        .append('rect')
        .attr('class', 'bar')
        .attr('x', d => xScale(d.name))
        .attr('y', maxBarHeight)
        .attr('height', 0)
        .attr('width', barWidth)
        .attr('fill', 'blue')
      // 同上
    }
  }
}
</script>

登入後複製

在上述程式碼中，我們使用updated函數在每個資料更新時，計算出高度的比例，並將它應用到每個條柱上，實現了逐步增長的效果。

步驟五：效果展示

最後，我們將繪製的長條圖展示出來。具體程式碼如下：

<template>
  <div>
    <svg :height="height + margin.top + margin.bottom" :width="width + margin.left + margin.right">
      <g :transform="`translate(${margin.left}, ${margin.top})`">
        <!-- 绘制图表 -->
      </g>
    </svg>
  </div>
</template>

<script>
import * as d3 from 'd3'

export default {
  data() {
    return {
      height: 200, // 容器高度
      width: 300, // 容器宽度
      margin: { top: 10, right: 10, bottom: 10, left: 10 }, // 容器边距
      data: [
        { name: 'A', value: 50 },
        { name: 'B', value: 70 },
        { name: 'C', value: 90 },
        { name: 'D', value: 30 },
        { name: 'E', value: 80 }
      ] // 数据
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.createChart()
    })
  },
  updated() {
    const t = d3.transition().duration(1000)
    const maxBarHeight = this.height - this.margin.top - this.margin.bottom
    const yScale = d3.scaleLinear()
      .domain([0, d3.max(this.data, d => d.value)])
      .range([maxBarHeight, 0])
    const bars = d3.select(this.$el.querySelector('g'))
      .selectAll('.bar')
      .data(this.data)
    bars.transition(t)
      .attr('y', d => yScale(d.value))
      .attr('height', d => maxBarHeight - yScale(d.value))
  },
  methods: {
    createChart() {
      const barWidth = 20 // 条柱宽度
      const groupSpace = 10 // 条柱组间距
      const maxBarHeight = this.height - this.margin.top - this.margin.bottom // 最大条柱高度
      const xScale = d3.scaleBand()
        .domain(this.data.map(d => d.name))
        .range([0, this.width - this.margin.left - this.margin.right - (groupSpace + barWidth) * (this.data.length - 1)])
        .paddingInner(0.1)
      const yScale = d3.scaleLinear()
        .domain([0, d3.max(this.data, d => d.value)])
        .range([maxBarHeight, 0])
      const bars = d3.select(this.$el.querySelector('g'))
        .selectAll('.bar')
        .data(this.data)
        .enter()
        .append('rect')
        .attr('class', 'bar')
        .attr('x', d => xScale(d.name))
        .attr('y', maxBarHeight)
        .attr('height', 0)
        .attr('width', barWidth)
        .attr('fill', 'blue')
    }
  }
}
</script>

登入後複製

效果顯示如下圖所示：

vue怎麼設定會增長的條柱