Question

正如您在此处看到的http://jsbin.com/acOmiQU/1/edit标签太长而无法在x上显示，但标签没有类，我该如何隐藏它？

Answer 1

尝试定位：

text[text-anchor="middle"]{
  display:none
}

显然它对于X轴标签来说是独一无二的。

演示： http://jsbin.com/AKIJUteW/1/edit

Answer 2

在配置选项中包含此项以隐藏X轴：

轴：＆＃34; Y＆＃34;

在配置选项中包含此项以隐藏Y轴：

轴：＆＃34; X＆＃34;

Answer 3

Morris.Bar({
// ...
xLabelAngle: 1,
});

尝试将xLabelAngle选项更改为1度值 - 它会在x-axis上为所有y="313.542402245"标签生成x axis属性的标签。

现在，只需像这样通过CSS定位所有x轴标签......

text[y="313.542402245"] {
display: none;
}

<强> EDITED

另一个解决方案是通过编辑morris js文件来隐藏x轴标签---

将此代码发现到morris js

Bar.prototype.drawXAxisLabel = function(xPos, yPos, text) {
var label;
return label = this.raphael.text(xPos, yPos, text).attr('font-size', this.options.gridTextSize).attr('font-family', this.options.gridTextFamily).attr('font-weight', this.options.gridTextWeight).attr('fill', this.options.gridTextColor);
};

并将其替换为下面一个。

Bar.prototype.drawXAxisLabel = function (xPos, yPos, text) {
var label;
return label = this.raphael.text(xPos, yPos, '').attr('font-size', this.options.gridTextSize).attr('font-family', this.options.gridTextFamily).attr('font-weight', this.options.gridTextWeight).attr('fill', this.options.gridTextColor);
};

Answer 4

我只想对此进行更新。我使用＆＃34; display：none;＆＃34;在x轴的文本上。 svg的整体大小特别受到y轴标签的影响，它最多只显示2个字符/数字，因为其他字符/数字溢出。

所以我用的是：

text[text-anchor="middle"]{
    opacity: 0;
}

使用morris js中的css隐藏x轴的标签

4 个答案: