Podział linii w etykiecie kategorii kendo-ui

Question

Mam wykres, na którym etykiety zawierają dwie części, a imię i numer. Chcę liczba pojawiać się poniżej nazwy, ilustrowany przez <br/> tagu:

załadować zawartość tabeli i ustaw etykietę w moim kontrolera:

Kiedy spróbuj użyć szablonu na etykiecie, tekst po linii podziałowej pojawi się u dołu wykresu wraz z resztą tekstu wykresu:

kod javascript:

$("#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 
    }); 

Jak zrobić pracę łamania wiersza?

Answer 1

ZOBACZ AKTUALIZACJĘ NA KOŃCU, TO JEST JUZ TERAZ MOŻLIWE ... Pozostawiając poniżej, ponieważ myślę, że nadal jest istotne.

Istnieje alternatywa, jeśli lokalizacja etykiety nie jest "dynamiczna" (tj. Istnieje wiele etykiet, które muszą mieć określone pozycje). Można używać elementu .

Ponieważ Kendo renderuje SVG w starej szkole, a nie w HTML5, tagi HTML nie działają. Musisz użyć tagów SVG. Nie są one świetne, ponieważ specyfikacja SVG 1.1 nie pozwala na łatwe zawijanie tekstu. Zalecenia dotyczące zawijania tekstu w SVG to tspan.

np.

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

jeśli ustawiony wyżej jako etykiety, będzie Ci bliżej, ale dopóki Kendo uaktualnienia do technologii HTML5, takie jak Canvas (mało prawdopodobne) lub SVG 1.2 jest w (sierpień 2014), jak to przynosi <tbreak/>, to jest najlepsze, jakie mamy.

Istnieje również inny problem polegający na tym, że renderowanie wykresu nie uwzględnia graficznej reprezentacji tekstu, więc może pojawić się niechciane obcinanie.

UPDATE (17/01/2014)

Według tego UserVoice http://kendoui-feedback.telerik.com/forums/127393-telerik-kendo-ui-feedback/suggestions/3434807-chart-multi-line-labels

mają zamiar wdrożyć funkcjonalność w Q1 2014, będę aktualizować odpowiedź raz to ogólnie dostępny.

UPDATE (27/04/2014) Powiedzieli, że to będzie teraz planowane po Q1 ... kto wie, kiedy teraz ... no cóż ...

UPDATE (01.09.2015) Potwierdzono, że działa w Kendo UI v2014.3.1119 z "\ n".Patrz dokumentacja: http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#configuration-categoryAxis.title.text

Answer 2

Wreszcie realizowany przez Telerik

zobaczyć http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#configuration-categoryAxis.title.text

Tekst może być podzielony na kilka linii za pomocą znaków linię zasilającą ("\ n").

Zdarza się tekst, tytuły, etykiety, notatki nicere!