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

我正在使用 Bootstrap、 JQuery 和 Chart.js (v2)制作一个主页。我的实现使用 v1工作，但是最近刚刚进入 Bower 并使用它下载了 v2。

我正在制作一个由4列组成的网格，每列包含一个饼图，但是在 v2中的缩放对我来说有点困惑。我希望图表具有响应性，这样它们就可以适用于平板电脑和智能手机等较小的设备。我的一个问题是，当鼠标悬停在图表的各个部分时，图表的图例以及悬停信息就会消失。

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>

Function s.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-started

173973

小开

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

删除图例

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

删除工具提示

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

这里是一个工作的小提琴手。

小开

最佳答案

从 chart.js 版本2.x 反过来:

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

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

小开

修改伊尚的回答

如果你像我一样使用反应,

const data = {
...
}


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




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

小开

对我来说，这没有起作用:

图例: { display: false }

但这个很好用，谢谢。

插件: { 图例: { 显示: 假, }, }