Vue.js と Chart.js を使用してクールなグラフを作成する方法

美しいグラフを作成するための chart.js オプションの詳細をご覧ください。インタラクティブなグラフは、データを視覚化する優れた方法を提供します。しかし、ほとんどのすぐに使えるソリューションでは、デフォルトのオプションではあまり美しいグラフが生成されません。

この記事では、chart.js オプションをカスタマイズしてクールなグラフを作成する方法を説明します。

⚡ クイックスタート

必要なもの:

• Vue.js

• vue-chart.js

• vue-cli

vue-cliを使用する基本的な構造はわかっていると思いますすでにインストールされています。 chart.jsのパッケージャーとしてvue-chart.jsを使用します。

vue init webpack awesome-charts

次に、プロジェクト ディレクトリに移動して依存関係をインストールします:

cd awesome-charts && yarn install

vue-chartjs を追加します:

yarn add vue-chartjs -S

最初のグラフ

次に、最初の割引テーブルを作成しましょう。

touch src/components/LineChart.js && subl .

次に、vue-chartjs からポリライン テーブルのベース テーブルをインポートし、コンポーネントを作成する必要があります。

準備したデータとオプションを使用して、mount()関数のrenderChart()メソッドを呼び出します。

    import {Line} from 'vue-chartjs'
    
    export default Line.extend({
      mounted () {
    
        this.renderChart({
          labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
          datasets: [
            {
              label: 'Data One',
              backgroundColor: '#FC2525',
              data: [40, 39, 10, 40, 39, 80, 40]
            },{
              label: 'Data Two',
              backgroundColor: '#05CBE1',
              data: [60, 55, 32, 10, 2, 12, 53]
            }
          ]
        }, {responsive: true, maintainAspectRatio: false})
    
      }
    })

コードでは、いくつかのインスタンス データとオプションのパラメーターが chart.js のデータ オブジェクトに渡され、グラフが外側のコンテナーを満たすように 応答:true が設定されています。

renderChart() メソッドが使用できる理由は、このメソッドといくつかのプロパティが BaseChart で定義されているためです。

実行とテスト

OK、App.vue から Hello.vue を削除し、チャートを導入します:

    <template>
      <p id="app">
        <p class="container">
          <p class="Chart__list">
            <p class="Chart">
              <h2>Linechart</h2>
              <line-example></line-example>
            </p>
          </p>
        </p>
      </p>
    </template>
    
    <script>
    import LineExample from './components/LineChart.js'
    export default {
      name: 'app',
      components: {
        LineExample
      }
    }
    </script>
    
    <style>
    #app {
      font-family: 'Avenir', Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
    .container {
      max-width: 800px;
      margin:  0 auto;
    }
    </style>
    CopyRaw

ターミナルで開発スクリプトを実行すると、チャートが表示されます。

yarn run dev

私をもっと美しくしてください

さあ、美化作業をする時間です

以上がVue.js と Chart.js を使用してクールなグラフを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。