隐藏ChartJS图表x轴上的标签

Question

我希望隐藏X轴标签，我已经有一个解决方案了：$scope.labels = ['', '', '', '', '', '', ''];，但在这种情况下，提示框上的标签也被隐藏了。我想要的是在鼠标悬停在柱形图上时显示标签，但不想在X轴上显示这些标签。因为图表宽度太小，这也会干扰我的用户体验。

我花了很多时间研究，但没能找到摆脱X轴标签的解决方案，请在这里帮帮我...

- Zaid Iqbal

Answer 1

我认为在最新版本的chartjs中，您可以通过选项设置来完成这个操作：

options: {
    scales: {
        xAxes: [
            {
                ticks: {
                    display: false
                }
            }
        ];
    }
}

- Marcin Wasilewski

Answer 2

您可以通过扩展图表来实现此功能，方法如下：

Chart.types.Bar.extend({
    name: "BarAlt",
    initialize: function(data){
        Chart.types.Bar.prototype.initialize.apply(this, arguments);
        var xLabels = this.scale.xLabels;
        for (var i = 0; i < xLabels.length; i++)
            xLabels[i] = '';
    }
});

并且像这样调用它。

var myBarChart = new Chart(ctx).BarAlt(data);

---

Fiddle - http://jsfiddle.net/kq3utvnu/

---

感谢@Samuele指出这一点！对于非常长的标签，您需要将标签设置为较短的内容，然后再将其设置为原始的标签（在图表元素中），以便标签不会占据x轴下方的空间。

Chart.types.Bar.extend({
    name: "BarAlt",
    initialize: function(data){
        var originalLabels = data.labels;
        data.labels = data.labels.map(function() { return '' });

        Chart.types.Bar.prototype.initialize.apply(this, arguments);
        this.datasets[0].bars.forEach(function(bar, i) {
            bar.label = originalLabels[i];
        });
        var xLabels = this.scale.xLabels;
        for (var i = 0; i < xLabels.length; i++)
        xLabels[i] = '';
    }
});

Fiddle - http://jsfiddle.net/nkbevuoe/（JavaScript在线编辑器）

- potatopeelings

---

这个解决方案存在问题。它只是隐藏了标签...因此，如果您有很长的标签，图表将无法正确适应。例如：labels: ["一月blablablablablablablablablabla"，"二月"，"三月"，"四月"，"五月"，"六月"，"七月"]， - Samuele

@Samuele - 你可以通过在初始化之前设置标签，然后在初始化后将它们设置回来来解决这个问题。我已经更新了答案。祝好！谢谢！ - potatopeelings

你不再需要这个解决方法了 - @marcin-wasilewski的答案非常有效。 - Inti

Answer 3

我成功地隐藏了X轴上的标签，同时保留了工具提示中的标题，方法如下：

• 在图表数据中： labels: [""
• 在图表选项中，在指定应返回的值之前添加object.label = "ToolTipTitle";

- A. Lee

---

请问您能否展示一下您的 options 对象，这样我就可以明确了解您的意思了吗？ - lsimmons