在 Chart.js 中隐藏 y 轴上的标签

Question

我需要隐藏使用库chart.js绘制的折线图中的标签。我用谷歌搜索但没有运气。这还能隐藏吗？

谢谢

Answer 1

要仅隐藏标签，在 Charts.js 2.3.0 版本中，您可以禁用

ticks

，如下所示：

options: {
    scales: {
        yAxes: [{
            ticks: {
                display: false
            }
        }]
    }
}

Answer 2

对于版本 2，您可以使用全局配置中的 Scales 选项来执行此操作。

  var ctx = document.getElementById("log");
  var chart = new Chart(ctx, {
      type: 'line',
      options: {
        scales: {
          xAxes: [{
            display: false
          }],
          yAxes: [{
            display: false
          }],
        }
      },
      data: {
        labels: ['Item 1', 'Item 2', 'Item 3'],
        datasets: [{
            fill: false,
            borderWidth: 1,
            data: [10, 20, 30]
        }]
      }
    });

Answer 3

对于 3.x 版本

options: {
  scales: {
    y: {
      ticks: {
        display: false,
      }
    }
  }
}

这将隐藏 y 标签。

Answer 4

这将隐藏 Y 轴中的标签：（但不是 X 轴）

    scaleShowLabels: false,

Answer 5

options: {
    scales: {
        yAxes: [{
            gridLines: {
              display: true,
              color: 'rgba(219,219,219,0.3)',
              zeroLineColor: 'rgba(219,219,219,0.3)',
              drawBorder: false, // <---
              lineWidth: 27,
              zeroLineWidth: 1                 
            },
            ticks: {
                beginAtZero: true,
                display: true
            }
        }]
    }
}

Answer 6

Chart.defaults.scale.ticks.display = false;

Answer 7

通过覆盖 y 轴标签宽度解决了这个问题

Chart.Scale.prototype.buildYLabels = function () {
  this.yLabelWidth = 0;
};

Answer 8

这应该删除所有文本（图例和标签）和所有网格线：

const chartOptions = {
  responsive: true,
  plugins: {
    legend: {
      display: false,
    },
    // title: {
    //   display: true,
    //   text: "Chart",
    // },
  },
  scales: {
    x: {
      grid: {
        display: false,
        drawBorder: false,
      },
      ticks: {
        display: false,
      },
    },
    y: {
      grid: {
        display: false,
        drawBorder: false,
      },
      ticks: {
        display: false,
      },
    },
  },
};

Answer 9

试试这个

 var statDat = {
    labels: ["January", "February", "March", "April", "May", "June"],
    datasets: [
        {
            fillColor: "rgba(255, 152, 0, 0.30)",
            strokeColor: "#f26b5f",
            pointColor: "#f26b5f",
            pointBackgroundColor: "rgba(179,181,198,1)",
            pointBorderColor: "#00fff5",
            pointStrokeColor: "#f26b5f",
            data: [203, 156, 99, 251, 305, 247]
        }
    ]
};

var stats = document.getElementById('stats').getContext('2d');

var options = {
    scaleShowLabels: false 
};

new Chart(stats).Line(statDat, options);

Answer 10

如果您使用的是3.3.2 Y 轴将被隐藏：

options: 
{
    scales: {
        yAxis: {
            display: false,
        }
    }
},

Answer 11

这对我来说适用于 Chartjs v2.4.0

这个想法是将 backDropColor 设置为完全透明。 255,255,255 是白色，但 0 将其设置为透明。

然后 userCallback 始终返回一个空字符串。

最终结果是隐藏的 y 轴标签。

  ticks: {
    backdropColor : "rgba(255,255,255,0)",
    userCallback: function(value, index, values) {
      return "";
    }
  }

Answer 12

 options: {
  scales: {
    yAxes: [{
        ticks: {
            display: false
        }
     }]
   }
 }