如何在 ChartJs 中隱藏 y 軸線？

Question

我正在使用氣泡圖並且必須隱藏 y 軸線。 我嘗試了以下但它不起作用。

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

Answer 1

這將禁用垂直 Y 軸線：

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

這可以與display結合使用以禁用垂直網格線：

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

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

Answer 5

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 6

所以如果你只想隱藏圖表上的網格線，但保留軸線：

gridLines : {
    drawOnChartArea: false
}

有了上面的例子，它會像：

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

Answer 7

我用這個：

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

Answer 8

像這樣放置您的選項配置

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

Answer 9

對於最新的 chart.js (v2.9.3) 庫：您可以在圖表選項中執行此操作以禁用特定軸：

可以像這樣獲得此圖表：

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

Answer 10

在4.1.1版中，我實際上是在尋找：

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