在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軸的標籤

回答

相關問題