Chartjs 隐藏数据集图例 v3

2022-01-22 00:00:00 jquery javascript chart.js chart.js3

我当前在网页上的图表由 Chart.js v2.5.3 提供支持.不久前配置的图表工作得很好.代码如下:

My current graphs on the webpage are powered by Chart.js v2.5.3. Charts that were configured a while ago works perfectly fine. Here is the code:

var ctw = document.getElementById("chart-budget");
var myChart = new Chart(ctw, {
  type: 'bar',
  data: {
    labels: ["budget", "costs"],
    datasets: [{
      label: "Amount",
      data: [520980, 23397.81],
      backgroundColor: [
        'rgba(143, 211, 91, 0.2)',
        'rgba(255, 99, 132, 0.2)',
      ],
      borderColor: [
        'rgba(143, 211, 91,1)',
        'rgba(255, 99, 132, 1)',
      ],
      borderWidth: 1
    }]
  },
  options: {
    legend: {
      display: false
    },
    responsive: true,
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        },
        gridLines: {
          drawBorder: false,
        }
      }],
      xAxes: [{
        gridLines: {
          display: false,
        }
      }]
    }
  }
});

由于 v3 现在可用，我正在考虑切换到它.快速测试揭示了一些我需要克服的问题.我正在努力解决的问题之一是无法隐藏数据集图例.在 V2.5 中，它是通过将 options.legend.display 设置为 false 来完成的，但不再是.在 文档中，我没有遇到任何可以帮助我的东西.

As v3 is now available I was thinking to switch to it. A quick test revealed some issues I will need to overcome. One of the issue I'm struggling with is unability to hide dataset legend. In V2.5 it was done by options.legend.display set to false but not any longer. In the documentation I did not come across anything that could help me.

有没有人可以建议如何在 Chart.js V3 中隐藏图例?

Is there anyone who can advice on how to hide a legend in Chart.js V3?

/库巴

推荐答案

配置如下选项可以解决V3版本的问题.

Configuring option like below would solve the problem in V3 version.

options: { plugins: { legend: { display: false }, } }

相关文章