隐藏x轴ChartJS上的标签

Question

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

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

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

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

Answer 1

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

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

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

小提琴 - 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/