我正在尝试用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);
如果有人能帮我一把,那就太好了:)
提前感谢!
发布于 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>
https://stackoverflow.com/questions/50765841
复制相似问题