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

您可以在这里看到http://jsbin.com/acOmiQU/1/edit标签太长而无法在x上显示，但标签没有class，我怎么能隐藏它？在morris js中使用css隐藏x轴的标签

2013-12-21 user3106579

假设你在谈论2006年 - 2012年，它在最新的铬合金（31）上对我显示得很好。 –

@JustinWood链接更新大声笑 – user3106579

尝试定位：

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

显然，它是X轴标签是唯一的。

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

来源

2013-12-21 03:52:03

非常感谢！有效！ btw在哪里找到它？我认为y和x文本在一起？ – user3106579

我简单地打开了Chrome开发工具，并检查了X和Y的标签元素。对于Y，它是''，对于X它是' –

太糟糕了这个黑客也影响甜甜圈图表标签，因为他们共享相同的文本 - 锚点ID :( – Nimir

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

尝试改变xLabelAngle选项1个值 - 它的y="313.542402245"所有x axis标签一个属性生成的x-axis标签。

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

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

EDITED

另一种解决方案是通过编辑莫里斯js文件隐藏x轴标签 - -

查找这个代码进入莫里斯爵士

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); 
};

来源

2015-02-06 16:18:08

我只想在这一个更新。当我使用“display：none;”时遇到问题在x轴的文字上。 svg的整体大小受到影响，特别是y轴标签，它最多只显示2个字符/数字，因为其他字符/数字已溢出。

我用那么，什么是：

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

来源

2016-10-19 18:59:21

在配置选项包括这个隐藏X轴：

轴： “Y”

在配置选项隐藏ÿ包括此轴：

轴：“x”

来源

2017-08-17 11:02:11

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

回答

相关问题