Question

我创建了一条带有直线的简单折线图，但如果该线沿着顶部和底部水平网格线运行，则显示的颜色比定义的要薄。即使网格线被隐藏了。

https://i.stack.imgur.com/rD58f.png

我的代码：

window.onload = function() {

    var config =  {
        type: "line",
        data: {
            labels: ["Jan", "Feb", "Mar","Jun","Jul","Aug","Sep", "Oct", "Nov"],
            datasets: [ {
                backgroundColor: "#ff0000",
                borderColor: "#ff0000",
                fill: false,
                borderWidth: 2,
                lineTension: 0,
                data: [0, 0, 0, 1, 6, 8, 8, 8, 8]
            }]
        }, 
        options: {
            responsive: true,
            scales: {
                xAxes: [{
                    gridLines: { display: false }
                }],
                yAxes: [{
                    gridLines: { display: false }
                }]
            },
            legend: {
                display: false
            }
        }
    };          

    var ctx = document.getElementById("canvas").getContext("2d");
    var chart = new Chart(ctx, config);
}

我该如何解决这个问题？

Answer 1

我试了一下。但我发现实际工作的唯一解决方案是使用chartjs的画布助手添加空间。您可以通过将以下代码添加到您的应用程序来实现此目的：

var WIDE_CLIP = {top: 2, bottom: 4};

Chart.canvasHelpers.clipArea = function(ctx, clipArea) {
    ctx.save();
    ctx.beginPath();
    ctx.rect(
      clipArea.left,
      clipArea.top - WIDE_CLIP.top,
      clipArea.right - clipArea.left,
      clipArea.bottom - clipArea.top + WIDE_CLIP.bottom
    );
    ctx.clip();
}

看看这个：https://stackoverflow.com/a/46303679/4032712

我尝试使用填充和位置选项，但似乎没有一个适合您的问题。希望我能帮到你！

Chart.js：行显示比定义的更薄

1 个答案: