如何在ChartJs中隐藏y轴线？

Question

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

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

Answer 1

这会禁用垂直Y轴线:

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

这可以与display禁用垂直gridLines 结合使用:

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

这是一个有效的例子:http://codepen.io/anon/pen/xqGGaV

Answer 2

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

图片：chartjs-without-axes

scales: {
   x: {
      display: false,
   },
   y: {
      display: false,
   }
},

更新：

如果您只想隐藏线条（并保留刻度线），请将display: false配置移至“grid”参数，如下所示：

scales: {
   y: {
      grid: {
         display: false
      }
   }
}

Answer 3

对于 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,
                }
            }
        }
    }
});

Answer 4

4.1.1在我实际上正在寻找的版本中：

scales: {
  y: {
    border: {
      display: false,
    },
}

Answer 5

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

Answer 6

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
            }]
        }
    }
});

Answer 7

因此，如果您只想隐藏图表上的网格线，但保留轴线：

gridLines : {
    drawOnChartArea: false
}

通过上面的例子，它会是这样的：

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