Chart.js 水平条网格线颜色

Question

我已经在我的 ASP.Net MVC 应用程序中开始向您介绍优秀的 chart.js 库。

首先，顶级图表插件。我使用的版本版本：2.7.2

现在谈谈我目前正在努力解决的主要问题。

首先是代码。

@{
    ViewBag.Title = "Home Page";
 }

<div class="container">
    <canvas id="myChart" width="400" height="60"></canvas>
</div>

<script src="~/Scripts/Chart.js"></script>
<script>
    var ctx = document.getElementById("myChart").getContext('2d');
    var myChart = new Chart(ctx, {
        type: "horizontalBar",
        data: {
            labels: ["Totals"],
            datasets: [
                { label: "A", data: [1800], backgroundColor: "rgba(165, 97, 125, 1.0)" },
                { label: "B", data: [1800], backgroundColor: "rgba(239, 195, 77, 1.0)" },
                { label: "C", data: [1800], backgroundColor: "rgba(70, 89, 71, 1.0)" },
                { label: "D", data: [900], backgroundColor: "rgba(82, 103, 161, 1.0)" },
                { label: "E", data: [2400], backgroundColor: "rgba(161, 132, 82, 1.0)" },
                { label: "F", data: [1300], backgroundColor: "rgba(82, 160, 161, 1.0)" }
            ]
        },
        options: {
            scales: {
                xAxes: [
                    {
                        barThickness: 13,
                        ticks: {
                            min: 0,
                            max: 11000,
                            stepSize: 3000,
                            display: true,
                            beginAtZero: false,
                            fontSize: 9,
                            color: "rgba(0, 0, 0, 1.0)",
                            callback: function (value, index, values) {
                                var q = value / 100;
                                return q + 'k';
                            }
                        },
                        gridlines: {
                            display: false,
                        },
                        stacked: true
                    }
                ],
                yAxes: [{
                    gridlines: {
                        color: 'rgba(0,0,0,1)'
                    },
                    display: true,
                    stacked: true
                }]
            }
        }
    });
</script>

简单的自包含示例，确实会生成堆叠的水平条。

我的问题是我想改变 yAxes 网格线的颜色，上面的代码显示了 rgb(241,241,241) 的颜色，而不是定义的颜色。

配置就是文档中描述的那样。

任何人都可以指出我做错了什么吗？

Answer 1

我认为您需要将 gridlines 属性更改为 gridLines，它将按预期工作！

下面是工作代码笔示例。

见笔 ChartJS Axis color by Aman Sharma (@amanboss9) on CodePen.

Chart.js 水平条网格线颜色

Chart.js horizontal bar grid line colors

javascript

asp.net-mvc

jquery

chart.js

chart.js2