Показать / Скрыть данные из Barchart с Chart.js - PullRequest
Новая
       23

Показать / Скрыть данные из Barchart с Chart.js

0 голосов
/ 08 июня 2018

Я пытаюсь создать гистограмму с Chart.js, где можно показать и скрыть столбцы (Персоны).Я знаю, что для этого можно щелкнуть ярлыки на легенде, но, поскольку все данные имеют одинаковую легенду, все столбцы скрыты.И если я использую несколько наборов данных, все столбцы отображаются вместе в одном столбце (не знаю, как это правильно объяснить).

Вот пример того, что у меня сейчас есть: 

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 Ответ

0 голосов
/ 09 июня 2018

Надеюсь, это вам поможет. 

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