使用chart.js v2移除图表上的图例

Question

使用chart.js v2移除图表上的图例

160

我正在使用 Bootstrap、JQuery 和 Chart.js（v2）制作主页。我之前已经使用了 v1 版本，但最近刚刚接触 Bower 并通过它下载了 v2 版本。

我正在制作一个包含四个列的网格，每个列都包含一个饼状图。然而，在 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>

函数.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,
    });
});

如果我删除空的 "labels" 字段，图表就无法工作。从外观上看，图表顶部有一个小间隔，这可能表明标题已经编写，但它们只是空字符串。

有人知道如何去除图例和悬停描述吗？我简直想不通这是如何使用的。

我会尽快发布 jsfiddle 链接！

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

- Zeliax

7个回答

115

从 chart.js 版本 3.x 开始:

legend、title 和 tooltip 命名空间从选项移动到 options.plugins 中。

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

- Ishan Varshney

4

尝试了20种不起作用的方法后，截至2021年9月，这个方法有效。 - Kjensen

截至2023年，对于任何使用ChartJS v3.x或v4.x的人来说，这是正确的答案！顺便提一下，如果在SO上有一个关于ChartJS的高评分答案涉及选项设置，但它似乎对您无效，则作为首要解决方案，请尝试将该设置嵌套在options: {plugins: {}，}内。这可能会解决您的问题（在我几次经历中已经解决了！） - KingRanTheMan

49

您可以使用Chart.defaults.global在JavaScript文件中更改默认选项。因此，您想要更改图例和工具提示选项。

删除图例

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

去除提示信息

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

这里有一个可用的 fiddler，可以点击这里访问。

- cmlonder

太棒了。我不知道如何使用那些函数，因为我不知道我可以在我的Javascript中直接编写这些命令。 - Zeliax

9

修改Ishan的答案

如果你像我一样正在使用React，

const data = {
...
}

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


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

- Joshua Folorunsho

4

以下内容没有生效：

legend: { display: false }

但是下面这段代码非常好用，谢谢。

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

- Kamishiraishi

1

如果您正在使用chartjs 2.x版本然后只需添加：

legend: {
  display: false,
},

但是如果您使用的是chart.js 3.x或更高版本，那么所有这些属性都已经移动到元素中，只需在那里添加即可。

elements: {
  line: {
    borderWidth: 0.4,
  },
  point: {
    radius: 0,
    hitRadius: 10,
    hoverRadius: 4,
    hoverBorderWidth: 3,
  },
  legend: {
    display: false,
  }
},

- Aryan Grover

0

您只需要添加以下代码行： legend: { display: false }

- Navy

16

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

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- BrightIntelDusk · Accepted Answer

从chart.js版本2.x开始：

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

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