Question

我正在尝试使用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);

如果有人可以帮助我，那就太好了。）

提前致谢！

Answer 1

我希望这会对你有所帮助。

＆＃13;

 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);

＆＃13;

<!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>

＆＃13;

使用Chart.js显示/隐藏条形图中的数据

1 个答案: