在图表js 4中删除折线图中的xy轴或更改xy轴的颜色

Question

我的 Chart.js 代码中有一个问题，即我想从图表中删除两条轴线，我希望显示网格（注意）

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

新图表(MAINCHARTCANVAS, { 类型：'线'， 数据： { 标签：[“周一”，“周二”，“周三”，“周四”，“周五”，“周六”，“周日”]， 数据集：[{ 标签：“我的第一个数据集”， 数据：[7,5,7,7,8,7,4], 边框颜色：“#4F3422”， 张力：0.4， 边框宽度：7， 边框跳过：真， }] }, 选项： { 音阶：{

        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
        }
    }
}

}） `

这是我之前尝试过的代码

改变颜色或移除轴对我来说足够了

我期待这样的

尝试将其颜色更改为透明或尝试将其删除

Answer 1

正如我在你的问题中看到的，你不希望基线位于两个轴上。

因此您只需在您的

options

中添加以下代码即可

scales: {
      x: {
          display: false, // this false makes whole data of an axis hidden
         },
      y: {
          display: false,
          }
 }

如果您想自定义网格线、刻度线和在刻度线和轴的基础边框之间呈现的破折号“-”，您可以使用以下代码：

grid: {
    color: 'rgba(100, 250, 132, 0.4)', // grid lines color
    drawTicks: false, // this will removes the "-" which is rendered between the tick and the base border
    drawOnChartArea: true, // borders inside the chart area
},
ticks: {
    color: 'red', // color of the tick (make "transparent" if you don't want to show the ticks on the axis)
    display: true, // if you want to hide the tick label (i.e. red, blue etc) make it false
}

希望这段代码有效。

谢谢。

var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
      labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
      datasets: [{
          label: '# of Votes',
          data: [12, 19, 3, 5, 2, 3],
          backgroundColor: 'rgba(255, 99, 132, 0.2)',
          borderColor: 'rgba(255, 99, 132, 1)',
          borderWidth: 1
      }]
  },
  options: {
      scales: {
          x: {
              display: false, // this false makes whole data of an axis hidden
          },
          y: {
              display: false,
          }
      }
  }
});

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<canvas id="myChart"></canvas>