Изменение графиков js

174

03 июля 2018, 02:10

Есть готовый график только не знаю как сделать каждый столбик отдельно + можно было отключать видимость каждого по отдельности . Более подробно типа салатовый (о),оранжевый (10),желтый (20),зеленый(30) + чтоб можно было так же отключить видимость любого из них по кнопке как на рисунке показано .

<!DOCTYPE html>
<html>
<head>
    <style>
    </style>
    <script src="/scripts/snippet-javascript-console.min.js?v=1"></script>
    </head>
<body>
<style class="cp-pen-styles">.container {
  width: 80%;
  margin: 15px auto;
}</style></head><body>
<div class="container">
  <h2>Chart</h2>
  <div>
    <canvas id="myChart"></canvas>
  </div>
</div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
    <script type="text/javascript">
        // create a chart.
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
   type: 'bar',
   data: {
      labels: ["0","10","20","30"],
      datasets: [{
         label: 'фракция1',
data: [Math.random() * 100],
         backgroundColor: '#AF7',
      },{
         label: 'фракция2',
data: [Math.random() * 100],
         backgroundColor: "#FA4",
      },{
         label: 'фракция3',
 data: [Math.random() * 100],
         backgroundColor: "#FF7",
      },{
         label: 'фракция4',
     data: [Math.random() * 100],
         backgroundColor: "#2A7",
      }]
      }
});
    </script>
</body>
</html>