隐藏x轴ChartJS上的标签

时间:2015-09-29 10:10:30

标签: javascript bar-chart chart.js

我想在x轴上隐藏标签,因为我有一个设置

的解决方案

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

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

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

3 个答案:

答案 0 :(得分:5)

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

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

答案 1 :(得分:4)

您可以扩展图表来执行此操作,如此

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/

答案 2 :(得分:0)

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

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