Vue統計グラフのデータラベルと数値表示スキル

統計グラフは、Web アプリケーションの開発時にデータを表示する非常に重要な方法です。Vue は、データの操作と表示に便利な関数を多数提供する人気の JavaScript フレームワークです。この記事では、Vue を使用して統計グラフにデータラベルと数値表示を追加する方法を説明します。

データラベルを使用する

データラベルは、チャートに表示されるデータに対応する値を指します。これらは、ユーザーが図の内容をより明確に理解するのに役立ちます。Vue はChart.js、折れ線グラフ、棒グラフ、円グラフなど、さまざまな種類のグラフの作成に使用できる強力なグラフ作成ライブラリである Vue と呼ばれるライブラリを提供します。Chart.js単純な折れ線グラフを作成し、データラベルを追加するために使用します。

Chart.jsまず、ライブラリをインポートする必要があります。CDN リンク経由でhttps://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.jsHTML ファイルにインポートできます。

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>

次に、折れ線グラフを表示する Vue コンポーネントを作成します。

<template>
  <div>
    <canvas id="myChart"></canvas>
  </div>
</template>

<script>
export default {
  mounted() {
    this.createChart();
  },
  methods: {
    createChart() {
      var ctx = document.getElementById("myChart").getContext("2d");
      var myChart = new Chart(ctx, {
        type: "line",
        data: {
          labels: ["January", "February", "March", "April", "May", "June", "July"],
          datasets: [
            {
              label: "Data",
              data: [12, 19, 3, 5, 2, 3, 11],
              borderColor: "rgba(75, 192, 192, 1)",
              fill: false
            }
          ]
        },
        options: {
          scales: {
            yAxes: [
              {
                ticks: {
                  beginAtZero: true
                }
              }
            ]
          }
        }
      });
    }
  }
};
</script>

上記のコードでは、Chart.jsライブラリを使用して折れ線グラフを作成しました。labels配列はチャートの横座標を定義し、datasets配列にはプロットされるデータが含まれます。labelプロパティを設定してデータラベルの名前を定義します。

付加価値表示

データラベルに加えて、グラフに特定の値を表示することもできます。Chart.jsこの機能を実現するには、提供されているコールバック関数を使用できます。コールバック関数では、値の形式と位置をカスタマイズできます。

以下は、コールバック関数を使用して折れ線グラフに値プロンプトを追加する方法を示すサンプルコードです。

<template>
  <div>
    <canvas id="myChart"></canvas>
  </div>
</template>

<script>
export default {
  mounted() {
    this.createChart();
  },
  methods: {
    createChart() {
      var ctx = document.getElementById("myChart").getContext("2d");
      var myChart = new Chart(ctx, {
        type: "line",
        data: {
          labels: ["January", "February", "March", "April", "May", "June", "July"],
          datasets: [
            {
              label: "Data",
              data: [12, 19, 3, 5, 2, 3, 11],
              borderColor: "rgba(75, 192, 192, 1)",
              fill: false
            }
          ]
        },
        options: {
          scales: {
            yAxes: [
              {
                ticks: {
                  beginAtZero: true,
                  callback: function(value, index, values) {
                    return value + "%";
                  }
                }
              }
            ]
          },
          tooltips: {
            callbacks: {
              label: function(tooltipItem, data) {
                var dataset = data.datasets[tooltipItem.datasetIndex];
                var value = dataset.data[tooltipItem.index];
                return value + "%";
              }
            }
          }
        }
      });
    }
  }
};
</script>

Vue統計グラフのデータラベルと数値表示スキル

おすすめ