Chart.js v2 で凡例を削除する方法： JavaScript、jQuery、CSS を含む包括的ガイド

Chart.js v2 でグラフの凡例を削除する方法（JavaScript、jQuery、CSS）

options プロパティを使用する

これは最も簡単で一般的な方法です。 options プロパティに legend オプションを追加し、その display プロパティを false に設定します。 以下のコード例をご覧ください。

var options = {
  legend: {
    display: false
  }
};

// ... 他のオプション ...

var chart = new Chart(ctx, {
  type: 'line',
  data: data,
  options: options
});

Chart.js v2.7.0 以降では、plugins プロパティを使用して凡例を非表示にすることもできます。 以下のコード例をご覧ください。

var options = {
  plugins: {
    legend: {
      display: false
    }
  }
};

// ... 他のオプション ...

var chart = new Chart(ctx, {
  type: 'line',
  data: data,
  options: options
});

jQuery と CSS を使用する

jQuery と CSS を使用して、凡例を非表示にすることもできます。 以下のコード例をご覧ください。

jQuery

$(document).ready(function() {
  var chart = new Chart($('#chartCanvas'), {
    type: 'line',
    data: data,
    options: options
  });

  // 凡例要素を非表示にする
  $('#chartCanvas').chart('getChart').legend.container.style.display = 'none';
});

CSS

.chartjs-legend {
  display: none;
}

注意事項

• 上記のコード例はほんの一例です。 使用するグラフの種類やオプションによって、コードを変更する必要がある場合があります。

凡例を非表示にするオプション

options = {
  legend: {
    display: false
  }
};

プラグインを使用して凡例を非表示にする

options = {
  plugins: {
    legend: {
      display: false
    }
  }
};

このオプションは、plugins プロパティに legend オプションを追加し、その display プロパティを false に設定することで、凡例を非表示にします。 Chart.js v2.7.0 以降でのみ使用できます。

jQuery を使用して凡例を非表示にする

$(document).ready(function() {
  var chart = new Chart($('#chartCanvas'), {
    type: 'line',
    data: data,
    options: options
  });

  // 凡例要素を非表示にする
  $('#chartCanvas').chart('getChart').legend.container.style.display = 'none';
});

このコードは、jQuery を使用して Chart インスタンスを取得し、その legend.container プロパティの display プロパティを none に設定することで、凡例を非表示にします。

.chartjs-legend {
  display: none;
}

この CSS コードは、.chartjs-legend クラスを持つすべての要素を非表示にすることで、凡例を非表示にします。

generateLabels オプションは、凡例に表示されるラベルをカスタマイズするために使用できます。 このオプションを使用して、空の文字列を返す関数を提供することで、凡例を非表示にすることができます。 以下のコード例をご覧ください。

options = {
  legend: {
    generateLabels: function(chart) {
      return '';
    }
  }
};

legendCallback オプションを使用する

options = {
  legend: {
    legendCallback: function(chart) {
      return '';
    }
  }
};

legendItemClick オプションは、凡例項目がクリックされたときに発生するイベントハンドラを指定するために使用できます。 このイベントハンドラを使用して、凡例を非表示にするコードを実行できます。 以下のコード例をご覧ください。

options = {
  legend: {
    legendItemClick: function(event) {
      event.chart.legend.container.style.display = 'none';
    }
  }
};

チャート要素を直接操作する

Chart.js v2 では、凡例を含むすべてのチャート要素に直接アクセスできます。 この方法を使用して、凡例要素を非表示にすることができます。 以下のコード例をご覧ください。

var chart = new Chart($('#chartCanvas'), {
  type: 'line',
  data: data,
  options: options
});

// 凡例要素を非表示にする
chart.legend.container.style.display = 'none';