Chart.js v2 -隐藏网格线

我使用chart. js v2绘制一个简单的折线图。一切看起来都很好，除了我不想要的网格线:

折线图的文档在这里:https://nnnick.github.io/Chart.js/docs-v2/#line-chart，但我找不到任何关于隐藏这些“网格线”的东西。

如何删除网格线?

当前回答

我发现了一个解决方案，隐藏网格线在折线图。

将gridLines颜色设置为与div的背景色相同。

var options = {
    scales: {
        xAxes: [{
            gridLines: {
                color: "rgba(0, 0, 0, 0)",
            }
        }],
        yAxes: [{
            gridLines: {
                color: "rgba(0, 0, 0, 0)",
            }   
        }]
    }
}

或使用

var options = {
    scales: {
        xAxes: [{
            gridLines: {
                display:false
            }
        }],
        yAxes: [{
            gridLines: {
                display:false
            }   
        }]
    }
}

2016-04-18 11:22:37

其他回答

options: {
    scales: {
        xAxes: [{
            gridLines: {
                drawOnChartArea: false
            }
        }],
        yAxes: [{
            gridLines: {
                drawOnChartArea: false
            }
        }]
    }
}

2018-08-20 13:33:10

在chartjs 3中，访问这个配置有一点不同。属性的名称不是gridLines，而是grid，如官方文档所示:

选项。gridLines被重命名为options.grid

来源: https://www.chartjs.org/docs/latest/getting-started/v3-migration.html#ticks

这是它的样子:

const options = {
  scales: {
    x: {
      grid: {
        display: false,
      },
    },
  },
};

2021-08-18 14:26:46

我发现了一个解决方案，隐藏网格线在折线图。

将gridLines颜色设置为与div的背景色相同。

var options = {
    scales: {
        xAxes: [{
            gridLines: {
                color: "rgba(0, 0, 0, 0)",
            }
        }],
        yAxes: [{
            gridLines: {
                color: "rgba(0, 0, 0, 0)",
            }   
        }]
    }
}

或使用

var options = {
    scales: {
        xAxes: [{
            gridLines: {
                display:false
            }
        }],
        yAxes: [{
            gridLines: {
                display:false
            }   
        }]
    }
}

2016-04-18 11:22:37

如果你想让它们默认消失，你可以设置:

Chart.defaults.scale.gridLines.display = false;

2018-06-08 22:19:03

请参阅官方文件:

https://www.chartjs.org/docs/latest/axes/styling.html#grid-line-configuration

下面的代码更改将隐藏gridLines:

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

2020-11-30 05:31:54

Chart.js v2 -隐藏网格线

推荐文章

最新文章

标签