我正在使用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>
函数.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,
});
});
如果我删除空的"标签"字段，图表将不再工作。从外观上看，图表顶部有一个小间距，这可能表明标题是写的，但它们只是空字符串。
有人知道如何删除图例和悬停描述吗？我根本无法理解是如何使用的
我一有时间就去弄一把小提琴！
编辑：链接到文档：https://nnnick.github.io/Chart.js/docs-v2/#getting-启动
从chart.js 2.x版本向后：
创建新的图表对象时，可以将选项对象添加到图表中。
var chart1 = new Chart(canvas, {
type: "pie",
data: data,
options: {
legend: {
display: false
},
tooltips: {
enabled: false
}
}
});
从chart.js 3.x版本开始：
图例、标题和工具提示名称空间从选项移动到options.plugins。
var chart1 = new Chart(canvas, {
type: "pie",
data: data,
options: {
plugins: {
legend: {
display: false
},
}
}
});
您可以在javascript文件中使用Chart.defaults.global来更改默认选项。因此，您需要更改图例和工具提示选项。
删除图例
Chart.defaults.global.legend.display = false;
删除工具提示
Chart.defaults.global.tooltips.enabled = false;
这是一个正在工作的小提琴手。
修改Ishan的答案
如果你正在使用像我一样的反应，
const data = {
...
}
const options = {
plugins: {
legend: {
display: false,
},
},
};
<Bar data={data} options={options} />
对我来说，这不起作用：
图例：｛display:false｝
但这很管用，谢谢。
插件：{图例：{display：false，}，}
如果您使用的是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,
}
},
您只需要添加该行图例：{显示：错误}