Zel*_*iax 87 javascript css jquery charts chart.js2
我正在使用Bootstrap,JQuery和Chart.js(v2)制作主页.我让我的实现使用v1,但最近刚进入Bower并使用它下载了v2.
我正在制作一个包含饼图的4列网格,但是v2中的缩放对我来说有点令人困惑.我希望图表能够快速响应,以便它们可以与平板电脑和智能手机等小型设备一起正确扩展,我的一个问题就是摆脱图表的图例以及将鼠标悬停在我的各个部分上时的悬停信息图表.
<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>
$(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
Bri*_*usk 222
创建新的Chart对象时,可以将选项对象添加到图表中.
var chart1 = new Chart(canvas, {
type: "pie",
data: data,
options: {
legend: {
display: false
},
tooltips: {
enabled: false
}
}
});
cml*_*der 41
您可以Chart.defaults.global在javascript文件中使用更改选项.因此,您想要更改图例和工具提示选项.
Chart.defaults.global.legend.display = false;
Chart.defaults.global.tooltips.enabled = false;
这是一个工作小提琴手.
小智 17
从 chart.js 3.x 版开始：图例、标题和工具提示命名空间从 options 移动到 options.plugins。
var chart1 = new Chart(canvas, {
type: "pie",
data: data,
options: {
plugins:{
legend: {
display: false
},
}
}
});
Jos*_*sho 10
修改Ishan的答案
如果你像我一样使用react，
const data = {
...
}
const options = {
plugins: {
legend: {
display: false,
},
},
};
<Bar data={data} options={options} />