केंडो-यूई चार्ट

Question

के श्रेणी लेबल में लाइन ब्रेक मेरे पास एक चार्ट है जहां लेबल में दो भाग होते हैं, एक नाम एक संख्या होती है।

मैं चार्ट की सामग्री को लोड, और मेरे नियंत्रक में लेबल सेट: मैं नंबर नाम के नीचे दिखाई देते हैं, <br/> टैग के रूप में रेखांकित करना चाहते हैं

जब मैं लेबल पर एक टेम्पलेट का उपयोग करने का प्रयास करें, चार्ट के बाकी हिस्सों के साथ चार्ट के निचले हिस्से में लाइन ब्रेक के बाद टेक्स्ट दिखाई देता है:

जावास्क्रिप्ट कोड:

$("#chart1").kendoChart({ 
     theme: "BlueOpal", 
     title: { text: "My reported hours" }, 
     legend: { position: "bottom" }, 
     seriesDefaults: { type: "column" }, 
     dataSource: { 
      transport: { 
       read: { 
        url: dataUrl, 
        dataType: "json" 
       } 
      } 
     }, 
     series: [{ field: "SeriesField" }], 
     categoryAxis: { 
      field: "CategoryAxis", 
      labels: { 
       rotation: 0, 
       template: "#=value#<br/>newline" 
      }, 

     }, 
     valueAxis: { 
      labels: { format: "{0}h" }, 
      min: 0 
     }, 
     tooltip: { 
      visible: true, 
      template: "#= formatDecimal(value) #<br/> newline" 
     }, 
     seriesClick: onSeriesClick 
    }); 

कैसे मैं लाइन ब्रेक काम कर सकता हूँ?

Answer 1

अंत में अद्यतन देखें, यह अब संभव है ... नीचे छोड़कर मुझे लगता है कि यह अभी भी प्रासंगिक है।

यदि आपको "गतिशील" होने के लिए लेबल के स्थान की आवश्यकता नहीं है तो एक विकल्प है (यानी कई लेबल हैं जिन्हें विशिष्ट पदों की आवश्यकता होती है)।

आप <tspan> तत्व का उपयोग कर सकते हैं।

के रूप में केंडो एचटीएमएल 5 कैनवास की बजाय पुराने स्कूल एसवीजी प्रस्तुत करता है, एचटीएमएल टैग काम नहीं करते हैं। आपको एसवीजी टैग का उपयोग करना होगा। ये बहुत अच्छे नहीं हैं क्योंकि एसवीजी 1.1 spec आसानी से टेक्स्ट रैपिंग के लिए अनुमति नहीं देता है। एसवीजी में पाठ रैपिंग के लिए सिफारिश tspan है।

उदा।

<tspan x="30" dy="0" text-anchor="middle">Test</tspan> 
<tspan x="30" dy="1.5em"text-anchor="middle">Other 7</tspan> 

अगर आप अपने लेबल के रूप में ऊपर निर्धारित करते हैं, यह आप बढ़ जाएगी, लेकिन केंडो कैनवास की तरह एचटीएमएल 5 प्रौद्योगिकियों में नवीनीकृत जब तक (अत्यधिक संभावना नहीं है), या एसवीजी 1.2 में आता है (अगस्त 2014) के रूप में इस <tbreak/> लाता है, यह हमारे पास सबसे अच्छा है।

यह भी एक और समस्या है कि चार्ट का प्रतिपादन टेक्स्ट के आलेखीय प्रतिनिधित्व को ध्यान में रखता नहीं है, इसलिए आपको कुछ अवांछित क्लिपिंग मिल सकती है।

अद्यतन (17/01/2014)

इस UserVoice http://kendoui-feedback.telerik.com/forums/127393-telerik-kendo-ui-feedback/suggestions/3434807-chart-multi-line-labels

वे Q1 2014 में कार्यक्षमता को लागू करने की योजना बना रहे हैं के अनुसार, मैं एक बार यह आम तौर पर उपलब्ध है जवाब अपडेट करेंगे।

अद्यतन (27/04/2014) उन्होंने कहा है कि यह अब Q1 के बाद की योजना बनाई हो जाएगा ... जो जब अब ... ओह अच्छी तरह से जानता है ...

अद्यतन (09/01/2015) पुष्टि की कि यह केंडो यूआई v2014.3.1119 में "\ n" के साथ काम करता है।देखें प्रलेखन: http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#configuration-categoryAxis.title.text

Answer 2

अंत में Telerik

द्वारा कार्यान्वित देखें http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#configuration-categoryAxis.title.text

पाठ लाइन फ़ीड वर्ण ("\ n") का उपयोग करके कई पंक्तियों में विभाजित किया जा सकता है।

टेक्स्ट, शीर्षक, लेबल, नोट्स के लिए होता है!