Chart.js颜色没有改变

时间:2016-04-28 13:57:20

标签: html css chart.js

我正在尝试使用图表j来创建仪表板。我正试图在给出他们的入门页面的例子。但是酒吧的颜色总是灰色的。我知道我错过了一些非常微不足道的东西,但我无法弄清楚是什么。任何帮助将非常感激



<!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>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分: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/