如何在ChartJs中隐藏y轴缐?

aor9mmx1  于 2022-11-06  发布在  Chart.js
关注(0)|答案(9)|浏览(167)

我正在使用气泡图,必须隐藏y轴线。我已经尝试了以下,但它不工作。

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

hgc7kmma1#

这将禁用垂直Y轴线:

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

这可以与display结合使用,以禁用垂直网格线:

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

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

bq9c1y66

bq9c1y662#

从版本3开始,您应该使用此选项来完全隐藏轴:
图片:chartjs-without-axes

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

更新日期:

如果您只想隐藏线条(并保留刻度),请将display: false config移动到“grid”参数,如下所示:

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

fafcakar3#

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

xdnvmnnf4#

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

kulphzqa5#

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

bmp9r5qi6#

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

gridLines : {
    drawOnChartArea: false
}

上面的例子就像这样:

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

nfg76nw07#

我用这个:

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

wooyq4lh8#

这样放置选项配置

options: {
        legend: {
        display: false
    },

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

            }]
        }
    }
1rhkuytd

1rhkuytd9#

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

此图表可通过以下方式获得:

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

相关问题