2016-04-28 115 views
0

我想用图表js来创建仪表板。我正在尝试使用入门页面的示例。但酒吧的颜色总是灰色的。我知道我错过了一些非常微不足道的东西,但我无法弄清楚什么。任何帮助将非常感激Chart.js颜色没有变化

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title></title> 
 
    <script src="Scripts/jquery-1.10.2.js"></script> 
 
    <script src="Scripts/Chart.js"></script> 
 

 
    <script type="text/javascript"> 
 
     $(document).ready(function() { 
 
      //var ctx = $("#myChart"); 
 
      var ctx = document.getElementById("myChart"); 
 
      var myChart = new Chart(ctx, { 
 
       type: 'bar', 
 
       data: { 
 
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], 
 
        datasets: [{ 
 
         label: '# of Votes', 
 
         data: [12, 19, 3, 5, 2, 3] 
 
        }] 
 
       }, 
 
       options: { 
 
        scales: { 
 
         yAxes: [{ 
 
          ticks: { 
 
           beginAtZero: true 
 
          } 
 
         }] 
 
        } 
 
       } 
 
      }); 
 
     }); 
 
    </script> 
 
</head> 
 
<body> 
 
    <canvas id="myChart" width="400" height="400"></canvas> 
 

 
</body> 
 
</html>

回答

0

只需添加backgroundColor资料集改变所有栏的颜色。

... 
backgroundColor: 'rgba(121, 121, 255, 0.2)', 
... 

如果传递它的颜色数组,它将设置由栏中的颜色条的数据集

... 
backgroundColor: ['rgba(121, 121, 255, 0.2)', 'rgba(255, 121, 121, 0.2)',... ], 
... 

小提琴 - http://jsfiddle.net/L9qsb3h4/ 小提琴(由巴巴) - http://jsfiddle.net/0b98k2g8/

+0

我已经想通了...但谢谢你的答案... –