javascript - 使用 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
                }]
            }

添加了 fiddle 示例: https://jsfiddle.net/hdr4uuLy/