javascript 如何在Chart.js中删除轴的线/规则?

pvabu6sv  于 2023-04-10  发布在  Java
关注(0)|答案(9)|浏览(151)

我设法删除了图表中的所有水平线/规则,使用此:

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

但是我也想去掉代表Y轴的规则/条。* 但是我想保留标签 *:

不幸的是,我找不到任何选项。我只能删除整个轴,包括标签。
我使用的是Chart.js 2.3。

p1iqtdky

p1iqtdky1#

我找到了一种方法来删除这条线。它实际上被称为轴的border,并且有一个选项,请参阅“网格线配置”:

scales: {
    yAxes: [{
        gridLines: {
            drawBorder: false,
        }
    }]
}
rhfm7lfc

rhfm7lfc2#

这个应该能用

options: {
     scales: {
          yAxes: [{
               gridLines: {
                  display: false,
              }
          }]
     },
  }
lndjwyie

lndjwyie3#

这在2.8.0版本中为我工作-

scales: {
    yAxes: [{
        gridLines: {
            tickMarkLength: false,
        }
    }]
}
np8igboo

np8igboo4#

v3中,您可以:

options: {
  scales: {
    y: {
      grid: {
        drawBorder: false,
      }
    }
  }
}

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

g2ieeal7

g2ieeal75#

左边的线仍然来自x轴网格线。将x轴的'zeroLineColor'更改为'transparent'将其隐藏。

xAxes:[{
gridLines:{
zeroLineColor:'transparent'
}}]

来源:https://github.com/chartjs/Chart.js/issues/3950

yhqotfr8

yhqotfr86#

gridLines: {zeroLineColor: 'transparent'}
n53p2ov0

n53p2ov07#

这对我来说很有用yAxes: [ { gridLines: { display: false, }, }, ],

ua4mk5z4

ua4mk5z48#

在4.x.x版本中,你可以这样做:

options: {
  scales: {
    y: {
       border: {
        display: false,
      },
    },
    x: {
      grid: {
        drawOnChartArea: false,
      },
    },
  },
},

y中的边框是专门做你所要求的事情的选项,我为那些也想看看如何隐藏其余x轴线的用户添加了x。

6ss1mwsb

6ss1mwsb9#

你可以使用scaleLineColor: 'transparent'它将删除y任何x轴

相关问题