如何在ChartJs中隐藏y轴缐?

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

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

  1. yAxes: [{
  2. angleLines: {
  3. display: false
  4. }
  5. }]
hgc7kmma

hgc7kmma1#

这将禁用垂直Y轴线:

  1. options: {
  2. scales: {
  3. yAxes: [{
  4. gridLines: {
  5. drawBorder: false,
  6. },
  7. }]
  8. },
  9. },

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

  1. xAxes: [{
  2. gridLines: {
  3. display: false,
  4. },
  5. }],

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

展开查看全部
bq9c1y66

bq9c1y662#

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

  1. scales: {
  2. x: {
  3. display: false,
  4. },
  5. y: {
  6. display: false,
  7. }
  8. },

更新日期:

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

  1. scales: {
  2. y: {
  3. grid: {
  4. display: false
  5. }
  6. }
  7. }
展开查看全部
fafcakar

fafcakar3#

对于Chartjs版本3.3.2,这对我有效

  1. var barChart = new Chart(ctx,{
  2. type: 'bar',
  3. data: data,
  4. options: {
  5. scales:
  6. {
  7. y: {
  8. grid: {
  9. drawBorder: false, // <-- this removes y-axis line
  10. lineWidth: 0.5,
  11. }
  12. }
  13. }
  14. }
  15. });
xdnvmnnf

xdnvmnnf4#

  1. var myBubbleChart = new Chart(ctx,{
  2. type: 'bubble',
  3. data: data,
  4. options: {
  5. scales:
  6. {
  7. yAxes: [{
  8. gridLines : {
  9. display : false
  10. }
  11. }]
  12. }
  13. }
  14. });
kulphzqa

kulphzqa5#

  1. var ctx = document.getElementById("myChart");
  2. var data = {
  3. datasets: [
  4. {
  5. label: 'First Dataset',
  6. data: [
  7. { x: 20, y: 30, r: 10 },
  8. { x: 40, y: 10, r: 10 },
  9. { x: 30, y: 20, r: 30 }
  10. ]
  11. }]
  12. };
  13. var myBubbleChart = new Chart(ctx,{
  14. type: 'bubble',
  15. data: data,
  16. options: {
  17. scales:
  18. {
  19. yAxes: [{
  20. display: false
  21. }]
  22. }
  23. }
  24. });
展开查看全部
bmp9r5qi

bmp9r5qi6#

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

  1. gridLines : {
  2. drawOnChartArea: false
  3. }

上面的例子就像这样:

  1. var myBubbleChart = new Chart(ctx,{
  2. type: 'bubble',
  3. data: data,
  4. options: {
  5. scales:
  6. {
  7. yAxes: [{
  8. gridLines : {
  9. drawOnChartArea: false
  10. }
  11. }]
  12. }
  13. }
  14. });
展开查看全部
nfg76nw0

nfg76nw07#

我用这个:

  1. scales: {
  2. xAxes: [{
  3. display: false,
  4. }],
  5. yAxes: [{
  6. display: false,
  7. }]
  8. }
wooyq4lh

wooyq4lh8#

这样放置选项配置

  1. options: {
  2. legend: {
  3. display: false
  4. },
  5. title: {
  6. display: true,
  7. text: title+` (${data.reduce((a,b)=>a+b,0)})`
  8. }
  9. ,
  10. scales: {
  11. yAxes: [{
  12. display: false,
  13. }]
  14. }
  15. }
展开查看全部
1rhkuytd

1rhkuytd9#

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

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

  1. scales: {
  2. xAxes: [
  3. {
  4. gridLines: {
  5. display: false,
  6. },
  7. },
  8. ],
  9. },

相关问题