我想在x轴上隐藏标签,因为我有一个设置的解决方案
$scope.labels = [”,”,”];
但在这种情况下,标签也会隐藏在工具提示中.我想要的是在条形图上显示标签悬停,但我不想在x轴上显示这些标签.因为它也会扰乱我的用户体验,因为图表宽度太低.
解决方法
您可以扩展图表来执行此操作,就像这样
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] = '';
}
});
