vue2-frappeを使用したVue.jsの軽量チャート

投稿日: 2022-04-20 2022-10-07
タグ: Vue.js

Webでのグラフ作成に関しては、D3.jsとChart.jsの2つの主要な打撃があります。しかし、500ポンドのゴリラが必要ない場合もあります。場合によっては、期待どおりの単純なSVGチャートが必要になることがあります。そこで、 FrappeChartsが適しています。これは、フル機能のアニメーション化されたインタラクティブなSVGチャートを提供する小さなバニラJSライブラリです。シンプルなコンポーネントラッパーを使用すると、Vue.jsで使用できます。

入門

インストールすることから始めます vue2-frappe. （私はあなたがすでにVue.jsプロジェクトを立ち上げて実行していると仮定しています。）

$ npm install --save vue2-frappe

次に、プラグインを有効にします。（コンポーネントを登録するだけです。）

import Vue from 'vue';
import VueFrappe from 'vue2-frappe';
import App from './App.vue';

Vue.use(VueFrappe);

new Vue({
  el: '#app',
  render: h => h(App)
});

チャートの作成

vue2-frappe は、コンポーネントプロパティとしてフラッペするための構成オプションを提供するフラッペチャートの単純なラッパーです。トップレベルのオプションキーをVue.jsプロパティバインディングに変更することで、FrappeChartのドキュメントを直接使用できます。

App.vue

<template>
  <div id="app">
    <h2>Chart: Benedict's Weight</h2>
    <!-- id - Every chart must have an id. -->
    <!-- title - The title displayed on the chart -->
    <!-- type - The type of chart: line, bar, percent, pie, or axis-mixed. -->
    <!-- labels - Names for each value on the x-axis. -->
    <!-- height- Optional: How tall the chart should be. -->
    <!-- colors - Separate colors for each dataset. -->
    <!-- lineOptions - Additional options for how to display line charts. See docs. -->
    <!-- datasets - An array of objects containing names and values for each data set. -->
    <vue-frappe
      id="my-chart-id"
      title="Benedict's Weight From 2017-2018 (lbs)"
      type="line"
      :labels="['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']"
      :height="650"
      :colors="['#008F68', '#FAE042']"
      :lineOptions="{regionFill: 1}"
      :datasets="[
        {name: '2017', values: benedictsWeight2017},
        {name: '2018', values: benedictsWeight2018}
      ]"
    ></vue-frappe>
    <p>Conclusion: Benedict needs to go on a diet.</p>
  </div>
</template>

<script>

export default {
  name: 'app',
  data() {
    return {
      benedictsWeight2017: [480, 485, 491, 489, 485, 490, 497, 510, 512, 521, 530, 545],
      benedictsWeight2018: [540, 575, 570, 555, 572, 580, 585, 587, 588, 590, 592, 590]
    }
  }
}
</script>

上記の結果、次のようなグラフになります。

そして、それはほんの始まりに過ぎません。 Frappe Chartsは、円グラフ、棒グラフ、パーセンテージグラフ、ヒートマップ、高度な折れ線グラフと混合グラフなど、他のさまざまな種類のグラフをサポートしています。彼らのドキュメントを見てください！

getdocs

13036