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/

Answer 3

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

在图表数据中：labels: [""]
在图表选项中，在指定应返回的值的行

object.label = "ToolTipTitle";

隐藏x轴ChartJS上的标签

3 个答案: