使用 chart.js v2 删除图表上的图例
[英]Removing legend on charts with chart.js v2
问题描述
I'm making a homepage using, Bootstrap, JQuery and Chart.js (v2).
我正在使用 Bootstrap、JQuery 和 Chart.js (v2) 创建主页。 I had my implementation working using v1, but recently just got into Bower and downloaded v2 using that.我的实现使用 v1 工作，但最近刚刚进入 Bower 并使用它下载了 v2。
I'm making a grid of 4 columns each containing a pie chart, however the scaling in v2 is sort of confusing for me to get working.我正在制作一个由 4 列组成的网格，每列都包含一个饼图，但是 v2 中的缩放对我来说有点令人困惑。 I want the charts to be responsive so they scale properly with the smaller devices such as tablets and smartphones, and one of my problems is getting rid of the legend of the charts as well as the hover information when hovering the mouse over the sections of my chart.我希望图表具有响应性，以便它们与平板电脑和智能手机等较小的设备正确缩放，我的问题之一是摆脱图表的图例以及将鼠标悬停在我的部分时的悬停信息图表。
index.html索引.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函数.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,
});
});
If I remove the empty "labels" field the chart doesn't work anymore.如果我删除空的“标签”字段，图表将不再起作用。 And by the looks of it there is a small spacing at the top of the chart which could indicate that the headers are written, but they are just empty strings.从外观上看，图表顶部有一个小间距，这可能表明标题已写入，但它们只是空字符串。
Does anyone have an idea of how to remove the legend, and the hover description?有谁知道如何删除图例和悬停描述？ I simply can't get my head around how this is used我根本无法理解它是如何使用的
I will get my hands around a jsfiddle as soon as I get time!一有时间，我就会把手放在一个jsfiddle上！
EDIT: Link to the docs: https://nnnick.github.io/Chart.js/docs-v2/#getting-started编辑：链接到文档： https ://nnnick.github.io/Chart.js/docs-v2/#getting-started
6 个解决方案
解决方案1
316 已采纳 2016-07-05 21:13:40
From chart.js version 2.x backwards:从 chart.js 版本 2.x 向后：
The options object can be added to the chart when the new Chart object is created.创建新的图表对象时，可以将选项对象添加到图表中。
var chart1 = new Chart(canvas, {
type: "pie",
data: data,
options: {
legend: {
display: false
},
tooltips: {
enabled: false
}
}
});
解决方案2
63 2021-06-09 22:29:07
From chart.js version 3.x onwards:从 chart.js 版本 3.x 开始：
legend , title and tooltip namespaces are moved from options to options.plugins .legend 、 title和tooltip命名空间从 options 移到options.plugins 。
var chart1 = new Chart(canvas, {
type: "pie",
data: data,
options: {
plugins: {
legend: {
display: false
},
}
}
});
解决方案3
49 2016-04-20 18:14:11
You can change default options by using Chart.defaults.global in your javascript file.您可以在 javascript 文件中使用Chart.defaults.global更改默认选项。 So you want to change legend and tooltip options.所以你想改变图例和工具提示选项。
Remove legend删除图例
Chart.defaults.global.legend.display = false;
Remove Tooltip删除工具提示
Chart.defaults.global.tooltips.enabled = false;
解决方案4
5 2021-10-26 10:20:41
Modifying Ishan's answer修改伊山的答案
If you are using react like me,如果你像我一样使用反应，
const data = {
...
}
const options = {
plugins: {
legend: {
display: false,
},
},
};
<Bar data={data} options={options} />
解决方案5
3 2022-02-14 04:04:51
For me this didn't work:对我来说，这不起作用：
legend: { display: false }
But this works great, thank you.但这很好用，谢谢。
plugins: { legend: { display: false, }, }
解决方案6
0 2019-09-06 11:39:59
您只需添加该行图例： { display: false }
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.