使用Chart.js显示/隐藏条形图中的数据
使用Chart.js显示/隐藏条形图中的数据
提问于 2018-06-09 01:36:05
我正在尝试用Chart.js创建一个条形图，其中可以显示和隐藏条形图(人员)。我知道可以单击图例上的标签来执行此操作，但由于所有数据都具有相同的图例，因此所有条都将被隐藏。如果我使用多个数据集，所有的条形图都显示在一个条形图中(不确定如何正确解释这一点)。
这是我目前所拥有的example：
var options = {
type: 'horizontalBar',
data: {
labels: ['Person 1', 'Person 2', 'Person 3', 'Person 4'],
datasets: [{
label: 'Days',
data: [20, 42, 51, 4],
backgroundColor: ['#FFC857', '#E9724C', '#C5283D', '#481D24']
}]
},
options: {
scales: {
xAxes: [{
time: {
unit: 'day'
},
}],
},
legend: {
display: true
},
responsive: true
}
}
var ctx = document.getElementById("calendarStats").getContext('2d');
var myChart = new Chart(ctx, options);如果有人能帮我一把，那就太好了:)
提前感谢！
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-06-10 03:03:14
我希望这能对你有所帮助。
var options = {
type: 'horizontalBar',
data: {
datasets: [{
label: 'Person 1',
data: [20],
backgroundColor: ['#FFC857']
}, {
label: 'Person 2',
data: [42],
backgroundColor: ['#E9724C']
},{
label: 'Person 3',
data: [51],
backgroundColor: ['#C5283D']
},{
label: 'Person 4',
data: [4],
backgroundColor: ['#481D24']
}]
},
options: {
scales: {
xAxes: [{
time: {
unit: 'day'
},
}],
},
legend: {
display: true
},
responsive: true
}
}
var ctx = document.getElementById("calendarStats").getContext('2d');
var myChart = new Chart(ctx, options);<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<canvas id="calendarStats"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50765841
复制相关文章
相似问题