如何隐藏特定图表的图例显示？
我现在尝试的是，如果我有一个图表，然后，当我点击一个按钮与“onchange”功能，它将显示几个图表。但当我点击后退，我有我想要的图表，但仍然有“图例”的第二个图表在第一个图表的顶部。
有没有办法去除它？我找到了选项：{legend：{display:false}，但它删除了所有图表的图例。
这是我的代码
null
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
</head>
<body>
<div class="row mt-3">
<div class="col-md-12">
<div style="width:75%; margin: 0 auto;">
<canvas id="myChart"></canvas>
</div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="checkBox" onchange="toggleCategories(event)">
<label class="form-check-label" for="checkBox">Catégories</label>
</div>
</div>
</div>
<script>
var test1 = [0, 10, 5, 2, 20, 30, 45, 60, 43, 22, 11, 23];
var test2 = [90, 80, 75, 62, 50, 40, 35, 11, 2, 24, 28, 34];
var test3 = [90, 10, 90, 10, 50, 40, 23, 62, 13, 32, 11, 13];
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
// The type of chart we want to create
type: 'line',
// The data for our dataset
data: {
labels: ['January', 'February', 'test3', 'test4', 'test5', 'test6', 'test7', 'test9', 'test10', 'test11', 'test12'],
datasets: [{
label: 'My test1',
fill : false,
borderColor: 'rgb(255, 99, 132)',
data: test1,
}, {fill : false
}]
},
// Configuration options go here
options: {}
});
function toggleCategories(e){
if (e.target.checked) {
chart.data.datasets[0].label = 'My test2';
chart.data.datasets[0].data = test2;
chart.data.datasets[0].borderColor = 'rgb(255, 99, 132)';
chart.data.datasets[1].label = 'My test3';
chart.data.datasets[1].data = test3;
chart.data.datasets[1].borderColor = 'rgb(255, 99, 132)';
} else {
chart.data.datasets[0].label = 'My test1';
chart.data.datasets[0].data = test1;
chart.data.datasets[0].borderColor = 'rgb(255, 99, 132)';
chart.data.datasets[1].label = '';
chart.data.datasets[1].data = '';
chart.data.datasets[1].borderColor = '';
}
chart.update();
}
</script>
</body>
</html>null
亲切地
共有2个答案
Chart.js高度依赖于它的数据。因此，最简单的方法就是在需要时动态地将必要的数据填充到图表中。这将按照预期添加和删除图例。但是，不要忘记在数据更改时更新您的图表。
让我们添加一些代码来了解一下它，因为基本上你确实在做--只是有点错误。
图表的数据存储在数据集中。正如我们所看到的，您有两个条目，而第二个只是一个包含布尔属性(fill)的对象。因此，它在一开始就在您的传奇中显示undefined。
datasets: [{
label: 'My test1',
fill: false,
borderColor: 'rgb(255, 99, 132)',
data: test1,
}, {
fill: false
}]
但是，当切换复选框时，它看起来很好，因为您覆盖了togglecategories中的所有内容，如下所示。
function toggleCategories(e) {
if (e.target.checked) {
chart.data.datasets[0].label = 'My test2';
chart.data.datasets[0].data = test2;
chart.data.datasets[0].borderColor = 'rgb(255, 99, 132)';
chart.data.datasets[1].label = 'My test3';
chart.data.datasets[1].data = test3;
chart.data.datasets[1].borderColor = 'rgb(255, 99, 132)';
} else {
...
}
chart.update();
}
但是仔细看一下else就会发现这里发生了什么。
// Those 3 lines just reset on index 1, it doesn't get deleted
chart.data.datasets[1].label = '';
chart.data.datasets[1].data = '';
chart.data.datasets[1].borderColor = '';
因此，当您只想要1时，为了摆脱第2个图例，您只需删除DataSet[1]的对象，并在需要时重新添加它。
您可能需要查看这个小提琴，以获得一个完全工作的示例：
你试过切换浏览器吗？我已经在chrome上测试了你的代码，它似乎工作得很好。在图例的开始，第二个图形是未定义的，当我回去，它不再是，但它是灰色的。在我看来很好..让我知道。你好，我希望我已经帮到你了…
-
在highcharts中有没有一种方法，我们可以在图表中隐藏一个序列，但仍然显示在图例上？ 或者，我们是否可以添加一个假想/伪图例项，但并不真实存在于图表中？ 对于上下文：客户要求我们根据它们的类别为条形图着色（前10条应该是默认颜色深蓝色，接下来的2条是蓝色，最后3条是浅蓝色）。现在他们要求我们放3个图例：A组（前10小节），B组（后2小节），C组（后3小节）。B组和C组不需要点击，因为它们是虚
-
在我的android应用程序中，当用户聚焦SearchView时，我希望底部的菜单栏消失（这也会弹出软键盘）。当SearchView失去焦点时，我想再次显示底部的导航栏。 我尝试过使用，视图确实隐藏或显示，但由于某种原因，它总是保留其高度。下面是我BottomNavigationView的代码： 处理隐藏/显示导航栏的代码： BottomNavigationView由线性布局控制，如下所示：
-
问题内容： 是否可以使用图表的图例来切换显示/隐藏序列？ 我有一个传说，而且传说太多了，所以您无法很好地读出信息。我想知道是否有可能使用图例来切换显示/隐藏的系列？ 我的大多数名字都很长，如果在图例中写两次，这看起来很怪异，因此您知道夹心颜色属于夹心，而第二个颜色除之外还用于切换它们。 Edit1：也许我不清楚，即使没有内置函数，我也可以使用一些输入来表示工作区的样子，因为我什么也没想。 问题答案
-
是否可以使用图表的图例切换显示/隐藏系列？ 我的的大多数名称都很长，如果它们被写了两次，看起来很奇怪，一次是在图例中，这样您就可以知道哪个颜色属于哪个，第二次是在之外切换它们。 Edit1:也许我不清楚，即使没有内置函数，我也可以使用一些输入来了解变通方法的样子，因为我什么都想不出来。
-
问题内容： 有人可以告诉我如何始终隐藏视图吗？ 我正在使用隐藏视图，但是当重新打开应用程序时，我必须重新隐藏视图。我希望单击按钮时始终隐藏视图，直到清除应用程序数据或卸载为止。谢谢！ 问题答案： 没有永久隐藏的选项，但是您可以通过这种方式实现 1.删除具体的 您必须将状态保存到了像永久存储 共享首选项/数据库 共享首选项示例 1.将值存储在： 2.从中获取价值：
-
有人能告诉我如何永远隐藏视图吗？ 我用隐藏了一个视图，但是当重新打开应用程序时，我必须重新隐藏该视图。我想要一个视图隐藏总是当按钮被点击，直到清除应用程序数据或卸载。谢了！