隐藏x轴ChartJS上的标签

I want to hide labels on x-axis as i have a solution to set

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

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

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

but in that case labels are also getting hidden on tooltip. What i want is to show labels on bars hover but i don't want to show those labels on x-axis. As it also disturbs my UX as well because charts width is too low.

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

I did spend too much time on this but couldn't find a solution to get rid of x-axis labels. Please help me here....

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

3 个解决方案

#1

You can extend the chart to do this, like so

您可以扩展图表来执行此操作,就像这样

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

and call it like so

并称之为

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

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

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

Thanks @Samuele for pointing this out! For really long labels, you'll need to set the labels to something shorter and then set it back to the original ones (in the chart elements) so that no space is taken up below the x axis for the labels.

感谢@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/

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

#2

I think that's something you can do it with options setting in the latest versions of chartjs:

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

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

#3

I was able to hide labels on the x-axis, while keeping the title in the tooltip by doing the following:

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

In chart data: labels: [""]

在图表数据中:标签:[“”]

In chart options, add object.label = "ToolTipTitle"; before the line specifying the values that should be returned

在图表选项中,添加object.label =“ToolTipTitle”;在指定应返回的值的行之前

#1