Vue 統計グラフのグループ化およびフィルタリング手法

Vue 統計グラフのグループ化とフィルタリングのテクニック

はじめに:
Web 開発では、データの視覚的な表示はユーザーにとって非常に重要です。人気のある JavaScript フレームワークとして、Vue はデータの視覚化を非常にシンプルにするための豊富なツールとコンポーネントを提供します。この記事では、Vue での統計グラフのグループ化とフィルタリングのテクニックを紹介し、具体的なコード例を通して説明します。

1. グループ統計
統計グラフでは、多くの場合、データをグループ化し、統計分析を実行する必要があります。 Vue は、この機能を実現するためのメソッドをいくつか提供しています。

1. 計算属性の使用
   Vue では、計算属性を使用して統計用のデータをグループ化できます。以下では、例としてヒストグラムを使用して、計算された属性を使用してデータをグループ化する方法を示しています。

<template>
  <div>
    <h1>柱状图-分组统计</h1>
    <div v-for="(groupData, groupName) in groupedData" :key="groupName">
      <h2>{{groupName}}</h2>
      <ul>
        <li v-for="data in groupData" :key="data.id">
          {{data.name}}: {{data.value}}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      chartData: [
        { id: 1, name: 'Group A', value: 10 },
        { id: 2, name: 'Group A', value: 15 },
        { id: 3, name: 'Group B', value: 20 },
        { id: 4, name: 'Group B', value: 25 },
      ],
    };
  },
  computed: {
    groupedData() {
      return this.chartData.reduce((result, data) => {
        if (!result[data.name]) {
          result[data.name] = [];
        }
        result[data.name].push(data);
        return result;
      }, {});
    },
  },
};
</script>

上記のコードでは、chartData は元のデータであり、名前と値の 2 つのフィールドが含まれています。 computed 属性の groupedData メソッドを使用すると、元のデータを name フィールドに従ってグループ化し、各グループが配列に対応するオブジェクトを返すことができます。

2. フィルターの使用
   計算された属性の使用に加えて、Vue はデータのフィルターと変換に使用できるフィルター関数も提供します。以下では、円グラフを例として、フィルタを使用して統計データをグループ化する方法を示しています。

<template>
  <div>
    <h1>饼图-分组统计</h1>
    <div v-for="(groupData, groupName) in chartData | groupBy('name')" :key="groupName">
      <h2>{{groupName}}</h2>
      <ul>
        <li v-for="data in groupData" :key="data.id">
          {{data.name}}: {{data.value}}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      chartData: [
        { id: 1, name: 'Group A', value: 10 },
        { id: 2, name: 'Group A', value: 15 },
        { id: 3, name: 'Group B', value: 20 },
        { id: 4, name: 'Group B', value: 25 },
      ],
    };
  },
  filters: {
    groupBy: (value, field) => {
      return value.reduce((result, data) => {
        if (!result[data[field]]) {
          result[data[field]] = [];
        }
        result[data[field]].push(data);
        return result;
      }, {});
    },
  },
};
</script>

上記のコードでは、chartData は元のデータであり、名前と値の 2 つのフィールドが含まれています。 。 chartData をパイプ文字 "|" を介して groupBy フィルターに渡します。フィルター メソッドでは、データは名前フィールドに従ってグループ化され、最終的に各グループが配列に対応するオブジェクトが返されます。

2. データのフィルタリング
グループ統計に加えて、Vue はデータをフィルタリングして、条件を満たすデータのみを表示することもできます。一般的なデータ フィルタリング手法を 2 つ紹介します。

1. 計算属性の使用
   Vue では、計算属性を使用して、条件に基づいてデータをフィルターできます。以下では、折れ線グラフを例として、計算された属性を使用してデータをフィルター処理する方法を示しています。

<template>
  <div>
    <h1>折线图-数据过滤</h1>
    <ul>
      <li v-for="(data, index) in filteredData" :key="index">
        {{data.name}}: {{data.value}}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      chartData: [
        { id: 1, name: 'Data A', value: 10 },
        { id: 2, name: 'Data A', value: 15 },
        { id: 3, name: 'Data B', value: 20 },
        { id: 4, name: 'Data B', value: 25 },
      ],
      filter: 'Data A',
    };
  },
  computed: {
    filteredData() {
      return this.chartData.filter(data => data.name === this.filter);
    },
  },
};
</script>

上記のコードでは、chartData は元のデータであり、名前と値の 2 つのフィールドが含まれています。 。計算属性の filteredData メソッドで、filter メソッドを使用してデータをフィルターし、名前フィールドがフィルター値と等しいデータのみを返します。

2. フィルターの使用
   計算された属性の使用に加えて、Vue はフィルターを使用してデータをフィルターすることもできます。以下では、散布図を例として、フィルターを使用してデータをフィルター処理する方法を示します。

<template>
  <div>
    <h1>散点图-数据过滤</h1>
    <ul>
      <li v-for="data in chartData | filterBy(filter, 'name')" :key="data.id">
        {{data.name}}: {{data.value}}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      chartData: [
        { id: 1, name: 'Data A', value: 10 },
        { id: 2, name: 'Data A', value: 15 },
        { id: 3, name: 'Data B', value: 20 },
        { id: 4, name: 'Data B', value: 25 },
      ],
      filter: 'Data A',
    };
  },
  filters: {
    filterBy: (value, field, condition) => {
      return value.filter(data => data[field] === condition);
    },
  },
};
</script>

上記のコードでは、chartData は元のデータであり、名前と値の 2 つのフィールドが含まれています。 filter メソッドでは、filter メソッドを使用してデータをフィルターし、名前フィールドがフィルター値と等しいデータのみを返します。

結論:
Vue のグループ化およびフィルタリングのスキルを使用すると、統計グラフのグループ化およびデータ フィルタリング機能を簡単に実装できます。この記事で紹介した内容が、Vue 開発におけるデータ視覚化作業に役立つことを願っています。

以上がVue 統計グラフのグループ化およびフィルタリング手法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。