【问题标题】：Removing legend on charts with chart.js v2使用 chart.js v2 删除图表上的图例
【发布时间】：2016-04-20 16:11:45
【问题描述】：

我正在使用 Bootstrap、JQuery 和 Chart.js (v2) 创建主页。我使用 v1 实现了我的实现，但最近刚刚进入 Bower 并使用它下载了 v2。

我正在制作一个由 4 列组成的网格，每列都包含一个饼图，但是 v2 中的缩放比例让我无法开始工作。我希望图表具有响应性，以便它们与平板电脑和智能手机等较小的设备正确缩放，我的问题之一是摆脱图表的图例以及将鼠标悬停在我的部分时的悬停信息图表。

index.html

<body>
    <div class="container">
        <div class="row">
            <div class="col-xs-3">
                <canvas id="chart1"></canvas>
            </div>
            <div class="col-xs-3">
                <canvas id="chart1"></canvas>
            </div>
            <div class="col-xs-3">
                <canvas id="chart1"></canvas>
            </div>
            <div class="col-xs-3">
                <canvas id="chart1"></canvas>
            </div>
        </div>
    </div>
</body>

functions.js

$(document).ready(function(){
    var canvas = $("#chart1");
    var data = {
        labels: [],
        datasets: [{
            data: [10, 10],
            backgroundColor: ["#F7464A", "#FDB45C"],
            hoverBackgroundColor: ["#FF5A5E", "#FFC870"]
        }]
    };

    var chart1 = new Chart(canvas, {
        type: "pie",
        data: data,
    });
});

如果我删除空的“标签”字段，图表将不再起作用。从外观上看，图表顶部有一个小间距，这可能表明标题已写入，但它们只是空字符串。

有人知道如何删除图例和悬停描述吗？我根本无法理解它是如何使用的

一有时间，我就会动手做一个 jsfiddle！

编辑：文档链接：https://nnnick.github.io/Chart.js/docs-v2/#getting-started

【问题讨论】：

标签： javascript jquery css charts chart.js2

【解决方案1】：

选项对象可以在创建新的图表对象时添加到图表中。

var chart1 = new Chart(canvas, {
    type: "pie",
    data: data,
    options: {
         legend: {
            display: false
         },
         tooltips: {
            enabled: false
         }
    }
});

【讨论】：

非常感谢，我正在使用 react 和这个 hwo 来做 react 方式..
请注意，对象中还有可以访问的全局属性。这个为所有图表设置了它，而不是一个。
Chart.js v3 现在在options.plugins.legend.display 下有图例配置。 chartjs.org/docs/latest/configuration/legend.html
我认为这不是一个好方法。 bcz 这 yaxes 和 xaxes 以及其他挤压的东西

【解决方案2】：

您可以通过在您的 javascript 文件中使用 Chart.defaults.global 来更改默认选项。所以你想改变图例和工具提示选项。

删除图例

Chart.defaults.global.legend.display = false;

删除工具提示

Chart.defaults.global.tooltips.enabled = false;

Here 是一个工作提琴手。

【讨论】：

酷。我不知道如何使用这些函数，因为我不知道我可以在我的 Javascript 中编写这些命令。

【解决方案3】：

从 chart.js 版本 3.x 开始：图例、标题和工具提示命名空间从 options 移至 options.plugins。

var chart1 = new Chart(canvas, {
    type: "pie",
    data: data,
    options: {
          plugins:{   
             legend: {
               display: false
                     },
                  }
             }
});

【讨论】：

尝试了 20 种不同的方法后，都没有奏效。截至 2021 年 9 月，此方法有效。

【解决方案4】：

修改伊山的答案

如果你像我一样使用 react，

const data = {
...
}

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


<Bar data={data} options={options} />

【讨论】：

【解决方案5】：

对我来说这不起作用：

图例：{显示：假}

但这很好用，谢谢。

插件：{ 传奇： { 显示：假， }, }

【讨论】：

【解决方案6】：

您只需添加该行传奇： { 显示：假 }

【讨论】：

这个答案与其他答案有何不同？