如何在 ChartJs 中隐藏 y 轴线？

Posted 2023-02-16

【中文标题】如何在 ChartJs 中隐藏 y 轴线？

【英文标题】：How to hide y axis line in ChartJs?

【发布时间】：2016-11-30 07:02:15

【问题描述】：

我正在使用气泡图并且必须隐藏 y 轴线。我尝试了以下方法，但它不起作用。

yAxes: [
  angleLines: 
    display: false
  
]

【问题讨论】：

你能显示你正在使用的完整代码吗？最好在小提琴中。

Jaipradeesh，你能改变接受的答案，所以首先显示正确的答案吗？

【参考方案1】：

var ctx = document.getElementById("myChart");

var data = 
    datasets: [
        
            label: 'First Dataset',
            data: [
                 x: 20, y: 30, r: 10 ,
                 x: 40, y: 10, r: 10 ,
                 x: 30, y: 20, r: 30 
            ]
        ]
;

var myBubbleChart = new Chart(ctx,
    type: 'bubble',
    data: data,
    options: 
        scales:
        
            yAxes: [
                display: false
            ]
        
    
);

【讨论】：

这将隐藏轴本身。我需要蜱虫。但不是这条线。

【参考方案2】：

var myBubbleChart = new Chart(ctx,
    type: 'bubble',
    data: data,
    options: 
        scales:
        
            yAxes: [
                gridLines : 
                    display : false
                
            ]
        
    
);

【参考方案3】：

这会禁用垂直 Y 轴线：

options: 
  scales: 
    yAxes: [
      gridLines: 
        drawBorder: false,
      ,
    ]
  ,
,

这可以与display 结合使用来禁用垂直网格线：

xAxes: [
  gridLines: 
    display: false,
  ,
],

这是一个工作示例：http://codepen.io/anon/pen/xqGGaV

【讨论】：

谢谢！我还想补充一点，如果您想隐藏有关 x 轴的所有内容，请使用刻度：display: false, gridLines: display: false, drawBorder: false] 作为 xAxes 键。当然，同样适用于 yAses

有点违反直觉。我希望将display: false 添加到对象中以隐藏所有内容..

【参考方案4】：

所以如果你只想隐藏图表上的网格线，但保留轴线：

gridLines : 
    drawOnChartArea: false

上面的例子会是这样的：

var myBubbleChart = new Chart(ctx,
    type: 'bubble',
    data: data,
    options: 
        scales:
        
            yAxes: [
                gridLines : 
                    drawOnChartArea: false
                
            ]
        
    
);

【讨论】：

这对我有用（2.9.4），以前的答案似乎适用于旧版本。

完美。像魅力一样工作！

【参考方案5】：

对于最新的 chart.js (v2.9.3) 库： 您可以在图表选项中执行此操作以禁用特定轴：

这个图表可以这样获得：

  scales: 
      xAxes: [
        
          gridLines: 
            display: false,
          ,
        ,
      ],
    ,

【参考方案6】：

我用这个：

scales: 
    xAxes: [
        display: false,
    ],
    yAxes: [
        display: false,
    ]

【参考方案7】：

像这样设置您的选项配置

 options: 
        legend: 
        display: false
    ,

        title: 
            display: true,
            text: title+` ($data.reduce((a,b)=>a+b,0))`
        
        ,
        scales: 
            yAxes: [
                display: false,
                
            ]
        
    

【参考方案8】：

从版本 3 开始，您应该使用此选项来完全隐藏坐标轴：

图片：chartjs-without-axes

scales: 
   x: 
      display: false,
   ,
   y: 
      display: false,
   
,

【参考方案9】：

对于 Chartjs 3.3.2 版，这适用于我

var barChart = new Chart(ctx,
    type: 'bar',
    data: data,
    options: 
        scales:
        
            y: 
                grid: 
                    drawBorder: false, // <-- this removes y-axis line
                    lineWidth: 0.5,
                
            
        
    
);