在chartjs 4中删除或更改图表中坐标轴的颜色

ccrfmcuu  于 11个月前  发布在  Chart.js
关注(0)|答案(1)|浏览(132)

我的chart.js代码中有一个问题,我想从图表中删除两条轴线

const MAINCHARTCANVAS = document.querySelector(".main-chart")

new Chart(MAINCHARTCANVAS, {
    type: 'line',
    data: {
        labels: ["Mon" , "Tue" , "Wed" , "Thu" , "Fri" , "Sat" , "Sun"],
        datasets: [{
            label: 'My First Dataset',
            data: [7,5,7,7,8,7,4],
            borderColor: "#4F3422",
            tension: 0.4,
            borderWidth:7,
            borderSkipped: true,
        }]
    },
    options: {
        scales: {

            x:{
                grid:{
                    display:false,  
                },
                border:{
                    didplay: false,
                }
            },

            y:{
                drawBorder: false, 
                beginAtZero: true,
                grid:{
                    lineWidth:3,
                    color:"#E8ddd9",
                },
                border: {
                    display:false,
                    dash: [10,16],
                },
                ticks: {display: false}
            }
        },

        plugins: {
            legend: false, // Hide legend
            tooltip:{
                enabled: false
            },
            backgroundCircle: false
        },
        responsive: true,
        maintainAspectRatio: false,
        elements: {
            point:{
                radius: 3
            }
        }
    }
})
`

this my previous code I had tried 

changing color or removing the axis enough for me 

[enter image description here](https://i.stack.imgur.com/DhW4Z.png)

字符串

8hhllhi2

8hhllhi21#

您可以在您的选项中使用以下设置:

scales:{    
      x: {
        grid:{
          display: false,
          drawBorder: false
        },
        border: {
            display:false,
        },
      },
       y: {
        grid:{
          display: false,
          drawBorder: false
        },
        border: {
            display:false,
        },

      }
    },

字符串
通过该代码,它将满足隐藏所有的边界和网格,你可以看到下面的图像:

相关问题