Vue で成長バーを設定する方法

はじめに

データ視覚化では、棒グラフは非常に一般的なグラフの種類です。 Vue フレームワークで、成長可能な棒グラフを実装するにはどうすればよいでしょうか?この記事では、Vue とその他のライブラリを使用して、徐々に成長する棒グラフを実装する方法を紹介します。

ステップ 1: 必要なライブラリをインストールする

Vue を使用してアプリケーションを開発する場合、開発を支援するいくつかのサードパーティ ライブラリの使用を選択できます。たとえば、この記事ではデータ視覚化ライブラリとして D3.js を使用し、グラフの描画に使用するライブラリとして vx (D3.js をベースに実装) を使用しているため、まずこれら 2 つのライブラリをプロジェクトにインストールする必要があります。

1. npm を使用してインストールします

npm ツールを使用してこれら 2 つのライブラリをインストールし、次のコマンドを順番に実行できます:

npm install d3
npm install vx

2. cdn を使用してimport

<script></script> に次の 2 つの cdn を導入することでも使用できます:

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

ステップ 2: データの準備

描画前グラフを作成するには、まずデータを準備する必要があります。この例では、単純なオブジェクト配列を準備しました。各オブジェクトには、次のような 2 つの属性が含まれています。

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

このうち、name 属性は、各バーの名前を表します。 Name, value 属性は、各バーの高さを示します。

ステップ 3: コンテナを描画する

SVG 画像を使用して Vue でグラフを描画する場合、最初にコンテナを作成する必要があります。この例では、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>

ステップ 4: バーを描画する

続行 次に、データを使用して各バーを描画します。この例では、描画する必要があるのは徐々に大きくなる棒グラフであるため、各描画では現在の値に基づいて棒の高さを更新する必要があります。

まず、次のコードに従って最初のバーを描画します。

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 関数を使用して、データが更新されるたびに高さの比率を計算し、各バーに適用します。段階的な成長効果。

ステップ 5: 効果の表示

最後に、描画された棒グラフを表示します。具体的なコードは以下の通りです。

<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 とその他のライブラリを使用して成長棒グラフを実装する方法。実装にあたってはD3.jsやvxなどのライブラリを使用しましたが、これらのライブラリの使い方はそれほど難しいものではなく、使いこなすことでより便利にデータ可視化作業を完了することができます。この記事があなたにインスピレーションを与えてくれれば幸いです。

以上がVue で成長バーを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。