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

abithluo 于 12个月前发布在 Chart.js

关注(0)|答案(1)|浏览(167)

我在我的chart.js代码中有一个问题，那就是我想从图形中删除两条轴线，我想显示网格（注意）
`const MAINCHARTCANVAS = document. queryList（". 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：{刻度：{

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

字符串
}）`
这是我以前尝试过的代码
改变颜色或者移除轴
sample img for the reference
我期待着这样
expected output的
尝试改变它的颜色透明或尝试删除它

chart.js

来源：https://stackoverflow.com/questions/77664277/removing-the-xy-axis-or-changing-the-color-of-the-xy-axis-in-a-line-chart-in-cha

1条答案

按热度按时间

cidc1ykv1#

正如我在你的问题中所看到的，你不希望基线在两个轴上。
因此，您只需在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>

的字符串

赞(0）回复(0）举报 12个月前

我来回答

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

1条答案

相关问题

热门标签

最新问答