So richten Sie eine wachsende Bar in Vue ein-Front-End-Fragen und Antworten-php.cn

Vorwort

In der Datenvisualisierung ist Balkendiagramm ein sehr häufiger Diagrammtyp. Wie implementiert man im Vue-Framework ein Balkendiagramm, das wachsen kann? In diesem Artikel wird erläutert, wie Sie mit Vue und einigen anderen Bibliotheken ein schrittweise wachsendes Balkendiagramm implementieren.

Schritt 1: Installieren Sie die erforderlichen Bibliotheken

Wenn Sie Vue zum Entwickeln von Anwendungen verwenden, können wir einige Bibliotheken von Drittanbietern verwenden, um uns bei der Entwicklung zu unterstützen. In diesem Artikel verwenden wir beispielsweise die Datenvisualisierungsbibliothek D3.js und die zum Zeichnen von Diagrammen verwendete Bibliothek ist vx (implementiert auf Basis von D3.js). Daher müssen wir zunächst diese beiden Bibliotheken im Projekt installieren.

1. Verwenden Sie npm zum Installieren

Wir können das npm-Tool verwenden, um diese beiden Bibliotheken zu installieren, und führen Sie die folgenden Befehle nacheinander aus:

npm install d3
npm install vx

Nach dem Login kopieren

2. Verwenden Sie cdn, um

Wir können auch den &lt verwenden ;script> Code> führt die folgenden zwei CDN-Methoden zur Verwendung ein: <code><script></script>中引入以下两个cdn的方式来使用：

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

Nach dem Login kopieren

步骤二：数据准备

在绘制图表之前，我们需要先准备好数据。而在本次例子中，我们准备了一个简单的对象数组，每一个对象包含两个属性，具体如下：

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

Nach dem Login kopieren

其中，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>

Nach dem Login kopieren

步骤四：绘制条柱

接下来，我们就可以通过数据绘制每一个条柱。本次例子中，我们需要绘制的是一个So richten Sie eine wachsende Bar in Vue ein，所以每一次绘制都需要根据当前值来更新条柱的高度。

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

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

Nach dem Login kopieren

在上述代码中，我们通过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>

Nach dem Login kopieren

在上述代码中，我们使用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>

Nach dem Login kopieren

Schritt 2: Datenvorbereitung

Bevor wir das Diagramm zeichnen, müssen wir zuerst die Daten vorbereiten. In diesem Beispiel haben wir ein einfaches Objektarray vorbereitet. Jedes Objekt enthält zwei Attribute wie folgt:

rrreee

Darunter repräsentiert das Attribut name den Namen jedes Balkens, wert Das Attribut code> stellt die Höhe jedes Balkens dar.

Schritt 3: Zeichnen Sie den Container

So richten Sie eine wachsende Bar in Vue ein Wenn Sie SVG-Bilder zum Zeichnen von Diagrammen in Vue verwenden, müssen Sie zunächst einen Container erstellen. In diesem Beispiel verwenden wir das svg-Element als Container und legen die erforderliche Höhe und Breite fest. Der Code lautet wie folgt:

rrreee

Schritt 4: Balken zeichnen

Als nächstes können wir das übergeben data Zeichnen Sie jeden Balken. In diesem Beispiel müssen wir ein Balkendiagramm zeichnen, das allmählich wächst. Daher muss bei jeder Zeichnung die Höhe des Balkens basierend auf dem aktuellen Wert aktualisiert werden.

🎜Zuerst zeichnen wir die ersten Balken gemäß dem folgenden Code: 🎜rrreee🎜Im obigen Code verwenden wir D3.js, um die Position und Höhe jedes Balkens zu berechnen, und verwenden rect Das Element Zeichnet jeden Balken mit der Anfangshöhe, die auf das Attribut value in den Daten festgelegt ist. 🎜🎜Als nächstes müssen wir die Funktion updated in der Lebenszyklusfunktion von Vue verwenden, um eine schrittweise Erhöhung der Balkenhöhe zu erreichen. Die spezifische Implementierung ist wie folgt: 🎜rrreee🎜Im obigen Code verwenden wir die Funktion updated, um das Höhenverhältnis jedes Mal zu berechnen, wenn die Daten aktualisiert werden, und wenden es auf jeden Balken an, um einen Schritt zu erreichen. schrittweiser Wachstumseffekt. 🎜🎜Schritt 5: Effektanzeige🎜🎜Abschließend zeigen wir das gezeichnete Balkendiagramm an. Der spezifische Code lautet wie folgt: 🎜rrreee🎜Der Effekt ist in der folgenden Abbildung dargestellt: 🎜🎜🎜🎜🎜Zusammenfassung🎜🎜In diesem Artikel haben wir vorgestellt, wie man mit Vue und einigen anderen Bibliotheken ein allmählich wachsendes Balkendiagramm implementiert. Obwohl wir während des Implementierungsprozesses Bibliotheken wie D3.js und vx verwendet haben, ist die Verwendung dieser Bibliotheken nicht sehr schwierig. Durch deren Beherrschung können wir die Aufgabe der Datenvisualisierung bequemer erledigen. Ich hoffe, dieser Artikel hat Sie inspiriert. 🎜

Das obige ist der detaillierte Inhalt vonSo richten Sie eine wachsende Bar in Vue ein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!