时间戳

首页 > 解决方案 > Chart.js 水平条网格线颜色

javascript - Chart.js 水平条网格线颜色

问题描述

我已经在我的 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) 的颜色，而不是定义的颜色。

配置是文档中描述的方式。

任何人都可以通过展示我做错了什么来提供帮助吗？

标签： javascriptjqueryasp.net-mvcchart.jschart.js2

解决方案

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

下面是工作的 codepen 示例。

请参阅Aman Sharma ( @amanboss9 ) 在CodePen上 的 Pen ChartJS Axis 颜色。

推荐阅读