सीएसएस

Question

के साथ एसवीजी टेक्स्ट को घुमाने के लिए कैसे मैं चार्ट बनाने के लिए c3.js का उपयोग कर रहा हूं। समस्या यह है कि मैं xgrid पर पाठ तत्वों की स्थिति नहीं बदल सकता। मैं उन्हें क्षैतिज होना चाहता हूं। लेकिन जब भी मैं घूमने का प्रयास करता हूं तो तत्व svg के बाहर जाते हैं। मैं तो कैसे जगह कर सकते हैं वास्तव में वे कहाँ हैं, लेकिन उन्हें क्षैतिज

js बेला बनाने: http://jsfiddle.net/yrzxj3x2/7/

यहाँ सीएसएस है कि मैं पूरा कोड के लिए कोशिश की है js बेला देखें

.xLineLable text{ 
    font-size: 12px; 
} 
.c3-grid text { 
    fill: #000; 
    transform: rotate(0); 
    } 

Answer 1

आप पाठ बारी बारी से कर सकते हैं निम्नलिखित सीएसएस जोड़कर क्षैतिज में।

.c3-grid text { 
    fill: #000; 
    transform:rotate(0deg) translate(266px, 0px); 
    } 

यदि आप और लाइनें जोड़ना चाहते हैं तो आपको मैन्युअल रूप से मूल्य बढ़ाना चाहिए।

तुम भी तरह की स्थिति दे सकते हैं:

x: { 
    lines: [ 
     {value: "2016-01-08", text: "Want to rorate this text in 180 degrees", 
     class: "xLineLable", position: "outer-middle"} 


    ] 

Working Fiddle

संपादित करें:

आप क्षैतिज रेखा तो क्यों आप ygrid में जोड़ने के लिए नहीं करना चाहते हैं।

grid: { 
    y: { 
     lines: [ 
       {value: 50,text: "Want to rorate this text in 180 degrees", 
     class: "xLineLable", position: "middle"}, 

      ] 
    }, 

Fiddle

Answer 2

तो अपने बेला में पाठ यह 180 डिग्री बारी बारी से करने का कहना है ...

मैंने किया है कि यहाँ:

transform: translate(90px, 230px) rotate(90deg) !important; 

मैं भी यह क्षैतिज बनाया जैसे आप चाहते थे और उसे एक पठनीय जगह पर ले जाया गया:

transform: translate(295px, 115px); 

यदि आप चाहें तो इसे ऊपर और ऊपर रखने के लिए आप एक्स और वाई निर्देशांक को स्थानांतरित कर सकते हैं। यह पदों का उपयोग कर ग्रिड तत्वों की तरह दिखता है। सुनिश्चित नहीं है कि वह कोड कैसा दिखता है।