隐藏 x 轴 ChartJS 上的标签答案

【问题标题】：Hide labels on x-axis ChartJS隐藏 x 轴 ChartJS 上的标签
【发布时间】：2015-12-26 18:37:28
【问题描述】：

我想在 x 轴上隐藏标签，因为我有一个解决方案要设置

$scope.labels = ['', '', '', '', '', '', ''];

但在这种情况下，标签也会隐藏在工具提示中。我想要的是在条形悬停上显示标签，但我不想在 x 轴上显示这些标签。因为图表宽度太小，它也干扰了我的用户体验。

我确实在这方面花费了太多时间，但找不到摆脱 x 轴标签的解决方案。请在这里帮我....

【问题讨论】：

标签： javascript bar-chart chart.js

【解决方案1】：

你可以扩展图表来做到这一点，像这样

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

小提琴 - 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] = '';
    }
});

小提琴 - http://jsfiddle.net/nkbevuoe/

【讨论】：

这个解决方案有问题。它只是隐藏标签......所以如果你有很长的标签，图表将不适合。示例：标签：[“Januaryblablablablablablablablablablabla”，“February”，“March”，“April”，“May”，“June”，“July”]，
@Samuele - 您可以通过在初始化之前设置标签然后在初始化后将它们设置回来来解决这个问题。我已经更新了答案。干杯，谢谢！
您不再需要这种解决方法 - @marcin-wasilewski 的回答很有效。

【解决方案2】：

通过执行以下操作，我能够隐藏 x 轴上的标签，同时将标题保留在工具提示中：

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

【讨论】：

能否请您出示您的 options 对象，以便我明白您的意思？

【解决方案3】：

我认为您可以通过最新版本的 chartjs 中的选项设置来做到这一点：

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

【讨论】：