- 首页
- 前端开发
- 使用 chart.js v2 删除图表上的图例
使用 chart.js v2 删除图表上的图例
[英] Removing legend on charts with chart.js v2
本文介绍了使用 chart.js v2 删除图表上的图例的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用 Bootstrap、JQuery 和 Chart.js (v2) 制作主页.我的实现使用 v1，但最近刚刚进入 Bower 并使用它下载了 v2.
我正在制作一个由 4 列组成的网格，每列包含一个饼图，但是 v2 中的缩放比例让我无法开始工作.我希望图表具有响应性，以便它们可以在较小的设备(例如平板电脑和智能手机)上正确缩放，而我的问题之一是在将鼠标悬停在我的部分上时摆脱图表的图例以及悬停信息图表.
index.html
<div class="容器"><div class="row"><div class="col-xs-3"><canvas id="chart1"></canvas>
<div class="col-xs-3"><canvas id="chart1"></canvas>
<div class="col-xs-3"><canvas id="chart1"></canvas>
<div class="col-xs-3"><canvas id="chart1"></canvas>
functions.js
$(document).ready(function(){var canvas = $("#chart1");变量数据 = {标签: []，数据集:[{数据:[10, 10]，背景颜色:[#F7464A"，#FDB45C"]，悬停背景颜色:[#FF5A5E"，#FFC870"]}]};var chart1 = 新图表(画布，{类型:馅饼"，数据:数据，});});
如果我删除空的标签"字段，图表将不再起作用.从它的外观来看，图表顶部有一个小间距，这可能表明标题已写入，但它们只是空字符串.
有没有人知道如何删除图例和悬停描述?我简直无法理解这是如何使用的
一有时间我就会动手做 jsfiddle！
链接到文档:https://nnnick.github.io/Chart.js/docs-v2/#getting-started
解决方案
创建新的 Chart 对象时，可以将选项对象添加到图表中.
var chart1 = new Chart(canvas, {类型:馅饼"，数据:数据，选项: {传奇: {显示:假},工具提示:{启用:假}}});
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.
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.
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>
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!
EDIT: Link to the docs: https://nnnick.github.io/Chart.js/docs-v2/#getting-started
解决方案
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屋！
查看全文
