使用ChartJS设置单个条形图的背景颜色

Question

我试图在chart . js的例子之后建模我的条形图，并且没有任何运气。这就是我要重新创建的:

http://www.chartjs.org/docs/bar-chart-introduction

不知什么原因，我在图表上的条形显示为深灰色。我一直无法解决这个问题。我的代码如下。有人知道我如何改变我的代码来解决这个问题吗?

谢谢!

            // bar chart data
            var barData = {
                labels : ["Counselor","Examiner","Rock","Seeker","Uniter"],
                backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
            ],
            borderWidth: 1,

                datasets : [
                    {
                        // fillColor : "#48A497",
                        // strokeColor : "#48A4D1",
                        data : [100, 200, 300, 400, 500, ]
                    }
                ]
            }
            // get bar chart canvas
            var income = document.getElementById("income").getContext("2d");
            // draw bar chart
            new Chart(income).Bar(barData);

Answer 1

我认为问题是颜色应该是数据集的一部分，根据我在官方文档链接中读到的，试试这个:

var barData = {
                labels : ["Counselor","Examiner","Rock","Seeker","Uniter"],
                datasets : [{
                        // fillColor : "#48A497",
                        // strokeColor : "#48A4D1",
                        data : [100, 200, 300, 400, 500],
                        backgroundColor: [
                            'rgba(255, 99, 132, 0.2)',
                            'rgba(54, 162, 235, 0.2)',
                            'rgba(255, 206, 86, 0.2)',
                            'rgba(75, 192, 192, 0.2)',
                            'rgba(153, 102, 255, 0.2)',
                            ],
                        borderColor: [
                            'rgba(255,99,132,1)',
                            'rgba(54, 162, 235, 1)',
                            'rgba(255, 206, 86, 1)',
                            'rgba(75, 192, 192, 1)',
                            'rgba(153, 102, 255, 1)',
                            ],
                        borderWidth: 1
                }]
            }

小提琴的例子添加:https://jsfiddle.net/hdr4uuLy/

Answer 2

如果有人使用这个，则添加一点信息…确保这是在你的头部标签。我使用的只是Charts.JS CDN，但这需要bundle:

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.bundle.min.js"></script>