中條 美冬

1641722111

Vuejsで縦棒グラフまたは棒グラフを統合する方法

Vue棒グラフチュートリアル; このチュートリアルでは、Googleチャートに基づくvue-google-chartsプラグインを使用して、縦棒グラフまたは棒グラフをvuejsアプリケーションに統合する方法を説明します。

縦棒グラフは棒グラフと呼ばれることもあり、横棒または縦棒でデータを雄弁に表示します。棒グラフの高さと長さは、それらが表す値と似ています。

Vue環境を作成する

Vueの開発は、VUECLIツールにのみ依存しています。箱から出してすぐに使える、将来性のあるコマンドラインインターフェイスツールなので、無謀にインストールしましょう。

npm install -g @vue/cli

VueJsプロジェクトをインストールする

Vue CLIをインストールした後、以下のコマンドを使用して新しいvueアプリを作成します。

アプリがすでにダウンロードされている場合は、次のセクションに移動できます。

vue create vue-charts-app

プロジェクトフォルダに移動します。

cd vue-charts-app

VueGoogleチャートパッケージをインストールする

このステップでは、vuegoogleチャートパッケージをvuejsアプリにインストールする必要があります。コマンドプロンプトに移動し、コマンド実行と入力して、Googleチャートライブラリのインストールを開始します。

npm install vue-google-charts

チャートコンポーネントの作成と登録

このセクションでは、components / GoogleChart.vueファイルを作成してから、ファイルに次のコードを追加します。

<template>
  <div>
     
  </div>
</template>
 
<script>
import { GChart } from "vue-google-charts";
export default {
  name: "App",
  components: {
    GChart
  },
  data() {
    return {
  
    };
  }
};
</script>

src / App.vueを開き、新しいコンポーネントをファイルに定義します。

<template>
  <div class="container mt-5 text-center">
    <GoogleChart />
  </div>
</template>

<script>
import GoogleChart from './components/GoogleChart.vue'

export default {
  name: 'App',
  components: {
    GoogleChart
  }
}
</script>

VueにGoogle棒グラフ/縦棒グラフを追加する

いくつかのプロセスを含む水平縦棒グラフまたは棒グラフを作成するために、vueで横柱グラフを明示する実用的な方法を示します。チャートをインポートし、vueテンプレートでGChartディレクティブを呼び出します。

静的データを使用して棒グラフをvueで表示しましたが、HTTPリクエストを呼び出して、データを動的に取得してvue棒グラフに追加することができます。

src / components /GoogleChart.vueファイルを開いてコードを追加します。

<template>
  <div>
    <h2>Vue Js Google Column or Bar Chart Demo</h2>

    <GChart
      type="ColumnChart"
      :options="options"
      :data="data"
    />    
  </div>
</template>
 
<script>
import { GChart } from "vue-google-charts";

export default {
  name: "App",
  components: {
    GChart
  },
  data() {
    return {
      data: [
         ['Element', 'Density', { role: 'style' }],
         ['Print Media', 9.95, '#6B58E2'],
         ['Social Media', 55.55, '#00B28F'],
         ['Brodcast Media', 52.99, '#F8D12F'],
         ['Outdoor', 30.55, 'color: #e5e4e2' ],
         ['Internet', 45.21, 'color: #4E6973' ]
      ],
      options: {
        width: 1100,
        height: 400
      }
    };
  }
};
</script>

アプリケーションビューを開始します

最後のセクションでは、以下のコマンドを使用してvueアプリを実行します。

npm run serve

以下のURLを使用してブラウザでアプリを開きます。

http://localhost:8080
横棒グラフを表示

 

Vue棒グラフの例は終わりました。このチュートリアルでは、vueアプリに棒グラフと縦棒グラフを最初から簡単に追加する方法を学びました。

What is GEEK

Buddha Community

中條 美冬

1641722111

Vuejsで縦棒グラフまたは棒グラフを統合する方法

Vue棒グラフチュートリアル; このチュートリアルでは、Googleチャートに基づくvue-google-chartsプラグインを使用して、縦棒グラフまたは棒グラフをvuejsアプリケーションに統合する方法を説明します。

縦棒グラフは棒グラフと呼ばれることもあり、横棒または縦棒でデータを雄弁に表示します。棒グラフの高さと長さは、それらが表す値と似ています。

Vue環境を作成する

Vueの開発は、VUECLIツールにのみ依存しています。箱から出してすぐに使える、将来性のあるコマンドラインインターフェイスツールなので、無謀にインストールしましょう。

npm install -g @vue/cli

VueJsプロジェクトをインストールする

Vue CLIをインストールした後、以下のコマンドを使用して新しいvueアプリを作成します。

アプリがすでにダウンロードされている場合は、次のセクションに移動できます。

vue create vue-charts-app

プロジェクトフォルダに移動します。

cd vue-charts-app

VueGoogleチャートパッケージをインストールする

このステップでは、vuegoogleチャートパッケージをvuejsアプリにインストールする必要があります。コマンドプロンプトに移動し、コマンド実行と入力して、Googleチャートライブラリのインストールを開始します。

npm install vue-google-charts

チャートコンポーネントの作成と登録

このセクションでは、components / GoogleChart.vueファイルを作成してから、ファイルに次のコードを追加します。

<template>
  <div>
     
  </div>
</template>
 
<script>
import { GChart } from "vue-google-charts";
export default {
  name: "App",
  components: {
    GChart
  },
  data() {
    return {
  
    };
  }
};
</script>

src / App.vueを開き、新しいコンポーネントをファイルに定義します。

<template>
  <div class="container mt-5 text-center">
    <GoogleChart />
  </div>
</template>

<script>
import GoogleChart from './components/GoogleChart.vue'

export default {
  name: 'App',
  components: {
    GoogleChart
  }
}
</script>

VueにGoogle棒グラフ/縦棒グラフを追加する

いくつかのプロセスを含む水平縦棒グラフまたは棒グラフを作成するために、vueで横柱グラフを明示する実用的な方法を示します。チャートをインポートし、vueテンプレートでGChartディレクティブを呼び出します。

静的データを使用して棒グラフをvueで表示しましたが、HTTPリクエストを呼び出して、データを動的に取得してvue棒グラフに追加することができます。

src / components /GoogleChart.vueファイルを開いてコードを追加します。

<template>
  <div>
    <h2>Vue Js Google Column or Bar Chart Demo</h2>

    <GChart
      type="ColumnChart"
      :options="options"
      :data="data"
    />    
  </div>
</template>
 
<script>
import { GChart } from "vue-google-charts";

export default {
  name: "App",
  components: {
    GChart
  },
  data() {
    return {
      data: [
         ['Element', 'Density', { role: 'style' }],
         ['Print Media', 9.95, '#6B58E2'],
         ['Social Media', 55.55, '#00B28F'],
         ['Brodcast Media', 52.99, '#F8D12F'],
         ['Outdoor', 30.55, 'color: #e5e4e2' ],
         ['Internet', 45.21, 'color: #4E6973' ]
      ],
      options: {
        width: 1100,
        height: 400
      }
    };
  }
};
</script>

アプリケーションビューを開始します

最後のセクションでは、以下のコマンドを使用してvueアプリを実行します。

npm run serve

以下のURLを使用してブラウザでアプリを開きます。

http://localhost:8080
横棒グラフを表示

 

Vue棒グラフの例は終わりました。このチュートリアルでは、vueアプリに棒グラフと縦棒グラフを最初から簡単に追加する方法を学びました。