Bagaimana untuk menyediakan bar tumbuh dalam vue

Kata Pengantar

Dalam visualisasi data, carta bar ialah jenis carta yang sangat biasa. Dalam rangka kerja Vue, bagaimana untuk melaksanakan carta bar yang boleh berkembang? Artikel ini akan memperkenalkan cara menggunakan Vue dan beberapa perpustakaan lain untuk melaksanakan carta bar yang semakin berkembang.

Langkah 1: Pasang perpustakaan yang diperlukan

Apabila menggunakan Vue untuk membangunkan aplikasi, kami boleh memilih untuk menggunakan beberapa perpustakaan pihak ketiga untuk membantu kami dalam pembangunan. Sebagai contoh, dalam artikel ini, pustaka visualisasi data yang kami gunakan ialah D3.js, dan pustaka yang digunakan untuk melukis carta ialah vx (berdasarkan D3.js, pertama sekali, kami perlu memasang kedua-dua perpustakaan ini dalam projek).

1. Gunakan npm untuk memasang

Kita boleh menggunakan alat npm untuk memasang kedua-dua perpustakaan ini, dan melaksanakan perintah berikut dalam urutan:

npm install d3
npm install vx

2 import

Kami juga boleh menggunakannya dengan memperkenalkan dua CDN berikut dalam <script></script>:

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

Langkah 2: Penyediaan data

Sebelum melukis carta, kami perlu menyediakan data dahulu. Dalam contoh ini, kami menyediakan tatasusunan objek mudah, setiap objek mengandungi dua atribut, seperti berikut:

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

Antaranya, atribut name mewakili nama setiap bar, valueAtribut mewakili ketinggian setiap bar.

Langkah 3: Lukis bekas

Apabila menggunakan imej SVG untuk melukis carta dalam Vue, anda perlu mencipta bekas terlebih dahulu. Dalam contoh ini, kami akan menggunakan elemen svg sebagai bekas dan menetapkan ketinggian dan lebar yang diperlukan Kod adalah seperti berikut:

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

Langkah 4: Lukis bar

Seterusnya, kita akan Setiap bar boleh diplot melalui data. Dalam contoh ini, kita perlu melukis carta bar yang berkembang secara beransur-ansur, jadi setiap lukisan perlu mengemas kini ketinggian bar berdasarkan nilai semasa.

Pertama, kami melukis bar awal mengikut kod berikut:

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

Dalam kod di atas, kami menggunakan D3.js untuk mengira kedudukan dan ketinggian setiap bar, dan menggunakan rect elemen melukis setiap bar, dengan ketinggian awal ialah atribut value dalam data.

Seterusnya, kita perlu menggunakan fungsi updated dalam fungsi kitaran hayat Vue untuk mencapai peningkatan secara beransur-ansur dalam ketinggian bar. Pelaksanaan khusus adalah seperti berikut:

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

Dalam kod di atas, kami menggunakan fungsi updated untuk mengira nisbah ketinggian setiap kali data dikemas kini dan menggunakannya pada setiap bar untuk mencapai kesan pertumbuhan secara beransur-ansur .

Langkah 5: Paparan kesan

Akhir sekali, kami akan memaparkan carta bar yang dilukis. Kod khusus adalah seperti berikut:

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

Kesannya ditunjukkan dalam rajah di bawah:

Ringkasan

Dalam artikel ini, kami memperkenalkan cara Gunakan Vue dan beberapa perpustakaan lain untuk melaksanakan carta bar yang semakin meningkat. Walaupun kami menggunakan perpustakaan seperti D3.js dan vx semasa proses pelaksanaan, penggunaan perpustakaan ini tidak begitu sukar Menguasainya membolehkan kami menyelesaikan tugas visualisasi data dengan lebih mudah. Saya harap artikel ini memberi inspirasi kepada anda.

Atas ialah kandungan terperinci Bagaimana untuk menyediakan bar tumbuh dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!