Vue에서 성장 막대를 설정하는 방법-프런트엔드 Q&A-php.cn

Vue에서 성장 막대를 설정하는 방법

PHPz

풀어 주다： 2023-05-08 09:32:36

원래의

354명이 탐색했습니다.

머리말

데이터 시각화에서 막대 차트는 매우 일반적인 차트 유형입니다. Vue 프레임워크에서 성장할 수 있는 막대 차트를 구현하는 방법은 무엇입니까? 이 기사에서는 Vue 및 기타 라이브러리를 사용하여 점차 커지는 막대 차트를 구현하는 방법을 소개합니다.

1단계: 필요한 라이브러리 설치

Vue를 사용하여 애플리케이션을 개발할 때 일부 타사 라이브러리를 사용하여 개발을 지원할 수 있습니다. 예를 들어, 이 기사에서 우리가 사용하는 데이터 시각화 라이브러리는 D3.js이고 차트를 그리는 데 사용되는 라이브러리는 vx(D3.js 기반)이므로 먼저 프로젝트에 이 두 라이브러리를 설치해야 합니다.

1. npm을 사용하여 설치

npm 도구를 사용하여 이 두 라이브러리를 설치하고 다음 명령을 순서대로 실행할 수 있습니다.

npm install d3
npm install vx

로그인 후 복사

2 cdn을 사용하여

&lt를 사용할 수도 있습니다. ;script> Code>에서는 사용할 수 있는 다음 두 가지 CDN 방법을 소개합니다. <code><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>

로그인 후 복사

步骤四：绘制条柱

接下来，我们就可以通过数据绘制每一个条柱。本次例子中，我们需要绘制的是一个Vue에서 성장 막대를 설정하는 방법，所以每一次绘制都需要根据当前值来更新条柱的高度。

首先，我们按照以下代码来绘制初始的条柱：

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>

로그인 후 복사

2단계: 데이터 준비

차트를 그리기 전에 먼저 데이터를 준비해야 합니다. 이 예에서는 간단한 객체 배열을 준비했으며 각 객체에는 다음과 같은 두 가지 속성이 포함되어 있습니다.

rrreee

그 중 name 속성은 각 막대의 이름, value를 나타냅니다. code> 속성은 각 막대의 높이를 나타냅니다.

3단계: 컨테이너 그리기

Vue에서 성장 막대를 설정하는 방법 Vue에서 SVG 이미지를 사용하여 차트를 그리는 경우 먼저 컨테이너를 만들어야 합니다. 이 예에서는 svg 요소를 컨테이너로 사용하고 필요한 높이와 너비를 설정합니다. 코드는 다음과 같습니다.

rrreee

4단계: 막대 그리기

다음으로 데이터 각 막대를 그립니다. 이 예에서는 점진적으로 커지는 막대 차트를 그려야 하므로 각 도면은 현재 값을 기준으로 막대의 높이를 업데이트해야 합니다.

🎜먼저 다음 코드에 따라 초기 막대를 그립니다. 🎜rrreee🎜위 코드에서는 D3.js를 사용하여 각 막대의 위치와 높이를 계산하고 direct 요소를 사용합니다. 데이터의 value 속성에 설정된 초기 높이로 각 막대를 그립니다. 🎜🎜다음으로 Vue의 라이프 사이클 기능에 있는 updated 기능을 사용하여 바의 높이를 점차 늘려야 합니다. 구체적인 구현은 다음과 같습니다. 🎜rrreee🎜위 코드에서는 updated 함수를 사용하여 데이터가 업데이트될 때마다 높이 비율을 계산하고 이를 각 막대에 적용하여 단계적으로 달성합니다. 단계별 성장 효과. 🎜🎜5단계: 효과 표시🎜🎜마지막으로 그려진 막대 차트가 표시됩니다. 구체적인 코드는 다음과 같습니다. 🎜rrreee🎜효과는 아래 그림과 같습니다. 🎜🎜🎜🎜🎜Summary🎜🎜이 기사에서는 Vue 및 기타 라이브러리를 사용하여 점진적으로 성장하는 막대 차트를 구현하는 방법을 소개했습니다. 구현 과정에서 D3.js 및 vx와 같은 라이브러리를 사용했지만 이러한 라이브러리를 마스터하면 데이터 시각화 작업을 보다 편리하게 완료할 수 있습니다. 이 기사가 당신에게 영감을 주었기를 바랍니다. 🎜

위 내용은 Vue에서 성장 막대를 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!