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

时间:2015-02-25 10:21:59

标签: javascript chart.js

我需要隐藏使用库chart.js绘制的折线图中的标签。我用Google搜索但没有运气。可以隐藏吗?

由于

11 个答案:

答案 0 :(得分:41)

要隐藏标签,在Charts.js的最新版本(2.3.0)中,您可以像这样禁用ticks

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

答案 1 :(得分:14)

对于版本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]
        }]
      }
    });

答案 2 :(得分:13)

这将隐藏Y轴中的标签:(但不是X轴)

    scaleShowLabels: false,

答案 3 :(得分:4)

以覆盖y轴标签宽度

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

答案 4 :(得分:2)

尝试这个

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

答案 5 :(得分:1)

read -p "Size: " theSize
read -p "Shape: " theShape
read -p "Color: " theColor

答案 6 :(得分:1)

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

答案 7 :(得分:0)

您可以使用scaleShowLabels选项

答案 8 :(得分:0)

这适用于Chartjs v2.4.0

我们的想法是将backDropColor设置为完全透明。 255,255,255是白色,但0将其设置为透明。

然后userCallback总是返回一个emptry字符串。

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

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

答案 9 :(得分:0)

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

答案 10 :(得分:0)

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

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