Javascript 使用 chart.js v2 删除图表上的图例
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36749509/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Removing legend on charts with chart.js v2
提问by Zeliax
I'm making a homepage using, Bootstrap, JQuery and Chart.js (v2). I had my implementation working using v1, but recently just got into Bower and downloaded v2 using that.
我正在使用 Bootstrap、JQuery 和 Chart.js (v2) 制作主页。我的实现使用 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. 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.
我正在制作一个由 4 列组成的网格，每列包含一个饼图，但是 v2 中的缩放比例让我无法开始工作。我希望图表具有响应性，以便它们可以在较小的设备（例如平板电脑和智能手机）上正确缩放，我的问题之一是在将鼠标悬停在我的部分时摆脱图表的图例以及悬停信息图表。
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
回答by BrightIntelDusk
The options object can be added to the chart when the new Chart object is created.
创建新的 Chart 对象时，可以将选项对象添加到图表中。
var chart1 = new Chart(canvas, {
type: "pie",
data: data,
options: {
legend: {
display: false
},
tooltips: {
enabled: false
}
}
});
回答by cmlonder
You can change options by using Chart.defaults.globalin your javascript file. So you want to change legend and tooltip options.
您可以通过Chart.defaults.global在 javascript 文件中使用来更改选项。所以你想改变图例和工具提示选项。
Remove legend
删除图例
Chart.defaults.global.legend.display = false;
Remove Tooltip
删除工具提示
Chart.defaults.global.tooltips.enabled = false;
Hereis a working fiddler.
这是一个工作的小提琴手。
回答by Navy
You simply need to add that line legend: { display: false }
您只需要添加该行图例：{ display: false }
