Avant-propos
Dans la visualisation de données, le graphique à barres est un type de graphique très courant. Dans le framework Vue, comment implémenter un histogramme évolutif ? Cet article expliquera comment utiliser Vue et quelques autres bibliothèques pour implémenter un graphique à barres à croissance progressive.
Étape 1 : Installez les bibliothèques nécessaires
Lorsque nous utilisons Vue pour développer des applications, nous pouvons choisir d'utiliser certaines bibliothèques tierces pour nous aider dans le développement. Par exemple, dans cet article, la bibliothèque de visualisation de données que nous utilisons est D3.js, et la bibliothèque utilisée pour dessiner des graphiques est vx (implémentée sur la base de D3.js). Nous devons donc d'abord installer ces deux bibliothèques dans le projet.
1. Utilisez npm pour installer
Nous pouvons utiliser l'outil npm pour installer ces deux bibliothèques et exécuter les commandes suivantes dans l'ordre :
npm install d3
npm install vx
Copier après la connexion
2 Utilisez cdn pour introduire
Nous pouvons également utiliser le <. ;script> Code> présente les deux méthodes cdn suivantes à utiliser : <code><script></script>中引入以下两个cdn的方式来使用：
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://unpkg.com/@vx/group"></script>
Copier après la connexion
步骤二：数据准备
在绘制图表之前，我们需要先准备好数据。而在本次例子中，我们准备了一个简单的对象数组，每一个对象包含两个属性，具体如下：
const data = [
{ name: 'A', value: 50 },
{ name: 'B', value: 70 },
{ name: 'C', value: 90 },
{ name: 'D', value: 30 },
{ name: 'E', value: 80 }
]Copier après la connexion
其中，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>Copier après la connexion
步骤四：绘制条柱
接下来，我们就可以通过数据绘制每一个条柱。本次例子中，我们需要绘制的是一个Comment configurer des barres de croissance dans 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')Copier après la connexion
在上述代码中，我们通过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>Copier après la connexion
在上述代码中，我们使用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>Copier après la connexion
Étape 2 : Préparation des données
Avant de dessiner le graphique, nous devons d'abord préparer les données. Dans cet exemple, nous avons préparé un tableau d'objets simple, chaque objet contient deux attributs, comme suit :
rrreee
Parmi eux, l'attribut
name représente le nom de chaque barre, valeur L'attribut code> représente la hauteur de chaque barre.
Étape 3 : Dessinez le conteneur
Lorsque vous utilisez des images SVG pour dessiner des graphiques dans Vue, vous devez d'abord créer un conteneur. Dans cet exemple, nous utiliserons l'élément svg comme conteneur et définirons la hauteur et la largeur nécessaires. Le code est le suivant :
rrreee
Étape 4 : Dessiner des barres
Ensuite, nous pouvons passer le. données Dessinez chaque barre. Dans cet exemple, nous devons dessiner un graphique à barres qui s'agrandit progressivement, chaque dessin doit donc mettre à jour la hauteur de la barre en fonction de la valeur actuelle.
🎜Tout d'abord, nous dessinons les barres initiales selon le code suivant : 🎜rrreee🎜Dans le code ci-dessus, nous utilisons D3.js pour calculer la position et la hauteur de chaque barre, et utilisons
rect L'élément dessine chaque barre avec la hauteur initiale définie sur l'attribut
value dans les données. 🎜🎜Ensuite, nous devons utiliser la fonction
mise à jour dans la fonction de cycle de vie de Vue pour augmenter progressivement la hauteur de la barre. L'implémentation spécifique est la suivante : 🎜rrreee🎜Dans le code ci-dessus, nous utilisons la fonction
updated pour calculer le rapport de hauteur à chaque fois que les données sont mises à jour, et l'appliquons à chaque barre, obtenant ainsi une étape- effet de croissance par étapes. 🎜🎜Étape 5 : Affichage de l'effet🎜🎜Enfin, nous afficherons le graphique à barres dessiné. Le code spécifique est le suivant : 🎜rrreee🎜L'effet est illustré dans la figure ci-dessous : 🎜🎜🎜🎜🎜Résumé🎜🎜Dans cet article, nous avons présenté comment utiliser Vue et quelques autres bibliothèques pour implémenter un graphique à barres à croissance progressive. Bien que nous ayons utilisé des bibliothèques telles que D3.js et vx pendant le processus de mise en œuvre, l'utilisation de ces bibliothèques n'est pas très difficile. Leur maîtrise nous permet d'accomplir la tâche de visualisation des données plus facilement. J'espère que cet article vous a inspiré. 🎜
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
