chart.jsでラベルが増えてしまうのをやめたい。

前提・実現したいこと

ラベル名の「テスト」を、1つだけ表示させたい

発生している問題・エラーメッセージ

追加ボタンを押下すると同じラベル名のラベルが複数できてしまいます。
色々試してみたのですが、どうしてもラベルが増えるためご相談させて頂きます

該当のソースコード

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>
  </head>
  <body>
    <div id="app">
      <button v-on:click="addGraph">グラフに追加</button>
      <div>
        <canvas id="myChart"></canvas>
      </div>
    </div>
    <script src="testc.js"></script>
  </body>
</html>

new Vue({
    el: '#app',
    methods: {
          // グラフの初期化
          createGraph: function () {
            const data = {
              datasets: [],
            };
      
            config = {
              type: "horizontalBar",
              data: data,
              options: {
                scales: {
                  xAxes: [
                    {
                      stacked: true,
                      ticks: {
                        min: 0,
                      },
                    },
                  ],
                  yAxes: [
                    {
                      stacked: true,
                      ticks: {
                        min: 0,
                      },
                    },
                  ],
                },
              },
            };
      
            // グラフの初回描写
            myChart = new Chart(document.getElementById("myChart"), config);
          }, 
          addGraph: function () {
      
     
            const addData = {
              label: ["てすと"],
              data: [1],
              backgroundColor:'rgb(255,0,0)',
              
            };
            // 連想配列の配列にデータを追加する
            config.data.datasets.push(addData);
            // グラフ再描画
            myChart.update();
  
          },  
    
    },
    mounted: function(){
      this.createGraph();
    },
  });

ここにより詳細な情報を記載してください。

m.ts10806

2021/09/21 09:57

質問タグがあるので追加されたほうが良いかも。 https://teratail.com/tags/Chart.js

anzi1230

2021/09/21 09:59

はいありがとうございます！追加しました

行動規範の内容に同意します

回答1件

ベストアンサー

options.legend.labels.filter で制御できるみたいです。

javascript
1options: {
2  legend: {
3    labels: {
4      filter (legendItem) {
5        // legendItem.datasetIndex には関連したデータセットの index が入ってます
6        // true で表示 false で非表示
7        return legendItem.datasetIndex === 0
8      }
9    }
10  }
11}