使用chart.js v2删除图表上的图例 [英] Removing legend on charts with chart.js v2
问题描述
我正在使用Bootstrap，JQuery和Chart.js(v2)制作主页.我的实现使用v1进行工作，但最近刚进入Bower并使用该版本下载了v2.
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.
我正在制作一个由4列组成的网格，每个网格包含一个饼图，但是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.
<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,
});
});
如果我删除了空白的标签"字段，则该图表将不再起作用.从外观上看，图表顶部有一小段间距，这表明标题已写入，但它们只是空字符串.
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!
链接至文档: https://nnnick.github.io/Chart .js/docs-v2/#getting-started
推荐答案
创建新的Chart对象时，可以将options对象添加到图表中.
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
}
}
});
这篇关于使用chart.js v2删除图表上的图例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
