Question

我已经开始在我的ASP.Net MVC应用程序中使用出色的chart.js库。

首先，是图表的顶级加载项。我正在使用版本Version：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，它将按预期工作！

下面是有效的Codepen示例。

请参阅ChartJS Axis color上的Aman Sharma（@amanboss9）的钢笔CodePen。

Chart.js单杠网格线颜色

1 个答案: