如何在 ChartJs 中隐藏 y 轴线？答案

【问题标题】：How to hide y axis line in ChartJs?如何在 ChartJs 中隐藏 y 轴线？
【发布时间】：2016-11-30 07:02:15
【问题描述】：

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

yAxes: [{
  angleLines: {
    display: false
  }
}]

【问题讨论】：

你能显示你正在使用的完整代码吗？最好在小提琴中。
Jaipradeesh，你能改变接受的答案，所以首先显示正确的答案吗？

标签： javascript charts chart.js

【解决方案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,
                }
            }
        }
    }
});

【讨论】：