ChartJs DrawBorder（）配置不起作用

Question

这应该是一件简单的事情，但我不确定为什么 scales/legend 配置无法识别 drawBorder 设置。

剃刀页面

<html>
<head>
    <script src="~/Chart.js/chart.min.js"></script>                  
    <script src="~/jquery/jquery.min.js"></script>
    <script src="~/bootstrap/js/bootstrap.min.js"></script>
    <link href="~/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <style>
        #chart_container {
            width: 1400px;
            height: 620px;
            border: 1px solid #808080;
            padding: 1px;
            border-radius: 4px;
            display: block;
            overflow-y: scroll;
        }
    </style>
</head>

<body>
    <div class="container p-1">
        <div class="row pt-2">
            <div class="col-6">
                <h2 class="text-primary">Dashboard: Pie Graph</h2>
            </div>
            <div class="col-6 text-right">
                <a asp-action="Index" class="btn btn-primary"><i class="fas fa-sign-out-alt"></i>Back</a>
            </div>
        </div>

        <div class="form-group row my-2" id="chart_container">
            <div class="col-12">
                <canvas id="co2_bar_chart"></canvas>
            </div>
            <div class="col-12">
                <canvas id="temp_bar_chart"></canvas>
            </div>
            <div class="col-12">
                <canvas id="rh_bar_chart"></canvas>
            </div>
        </div>

        <script>
        var co2RepArray = @Json.Serialize(ViewBag.CO2REP);
        var CO2Array = @Json.Serialize(ViewBag.CO2View);

        var co2_ctx = $("#co2_bar_chart");
        var co2BarChart = new Chart(co2_ctx, {
            type: 'pie',
            data: {
                labels: CO2Array,
                datasets: [{
                    label: "Pie Chart (CO2)",
                    data: co2RepArray,
                    backgroundColor: ["rgba(242, 168, 54, .5)", "rgba(145, 65, 72, .5)", "rgba(74, 25, 92, .5)"],
                    backgroundColor: ["rgba(242, 168, 54)", "rgba(145, 65, 72)", "rgba(74, 25, 92)"],
                    borderWidth: 1
                }]
            },

            options: {
                maintainAspectRatio: false,
                scales: {
                    xAxes: [{
                        ticks: { beginAtZero: true },
                    }]
                },
                legend: {
                    display: false,
                    yAxes: [{
                        gridLines: {
                            display: false,
                            drawBorder: false,
                        }
                    }],
                    xAxes: [{
                        gridLines: {
                            display: false,
                            drawBorder: false,
                        }
                    }]
                }
            }

        });
        </script>
    </div>
</body>
</html>

我也试过了

scales: {
    yAxes: [{
        gridLines : {
            display: false,
            drawBorder: false,
        }
    }],
    xAxes: [{
        gridLines : {
            display: false,
            drawBorder: false,
        }
    }]
}

和

scales: {
    x: {
    grid: {
        display: false,
        drawBorder: false,
        drawOnChartArea: false,
        drawTicks: false,
    }
    y: {
    grid: {
        display: false,
        drawBorder: false,
        drawOnChartArea: false,
        drawTicks: false,
    }
}

我可以检查我遗漏的内容以删除带箭头的边界线 here 吗？

Answer 1

尝试删除 scales 中的以下代码，drawBorder 你的意思是在你的 scales 中设置的 xAxes:

xAxes: [{
    ticks: { beginAtZero: true },
}]

结果：

ChartJs DrawBorder（）配置不起作用

ChartJs DrawBorder() Configuration not working

asp.net-mvc

chart.js

asp.net-core