Ngắt dòng trong nhãn danh mục của biểu đồ kendo-ui

Question

Tôi có biểu đồ nơi các nhãn chứa hai phần, một tên là một số. Tôi muốn số xuất hiện bên dưới tên, minh họa bằng <br/> tag:

tôi tải các nội dung của bảng xếp hạng, và thiết lập các nhãn trong bộ điều khiển của tôi:

Khi tôi cố gắng sử dụng mẫu trên nhãn, văn bản sau ngắt dòng xuất hiện ở cuối biểu đồ cùng với phần còn lại của văn bản của biểu đồ:

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

Làm thế nào để tôi làm cho công việc ngắt dòng?

Answer 1

XEM CẬP NHẬT TẠI KẾT THÚC, NÀY CÓ THỂ CÓ THỂ ... Rời khỏi bên dưới vì tôi cho rằng nó vẫn có liên quan.

Có cách thay thế nếu bạn không cần vị trí của nhãn là "Động" (nghĩa là có nhiều nhãn cần phải có vị trí cụ thể).

Bạn có thể sử dụng phần tử <tspan>.

Khi Kendo hiển thị SVG trường cũ hơn là Canvas HTML5, thẻ html không hoạt động. Bạn phải sử dụng thẻ SVG. Đây không phải là tuyệt vời như spec SVG 1.1 không dễ dàng cho phép gói văn bản. Đề nghị cho gói văn bản trong SVGs là tspan.

ví dụ:

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

nếu bạn đặt trên như nhãn của bạn, nó sẽ giúp bạn gần gũi hơn, nhưng cho đến Kendo nâng cấp lên công nghệ HTML5 như Canvas (rất khó), hoặc SVG 1.2 đi kèm trong (tháng 8 năm 2014) vì điều này mang lại <tbreak/>, đây là điều tốt nhất chúng ta có.

Ngoài ra còn có một vấn đề khác trong đó việc hiển thị biểu đồ dường như không tính đến biểu diễn đồ họa của văn bản, vì vậy bạn có thể nhận được một số cắt không mong muốn.

CẬP NHẬT (17/01/2014)

Theo này UserVoice http://kendoui-feedback.telerik.com/forums/127393-telerik-kendo-ui-feedback/suggestions/3434807-chart-multi-line-labels

Họ đang có kế hoạch để thực hiện các chức năng trong Q1 năm 2014, tôi sẽ cập nhật câu trả lời khi nó thường có sẵn.

UPDATE (27/04/2014) Họ đã nói rằng đây bây giờ sẽ được lên kế hoạch cho sau Q1 ... ai mà biết được khi bây giờ ... oh well ...

UPDATE (09/01/2015) Xác nhận nó hoạt động trong Kendo UI v2014.3.1119 với "\ n".Xem tài liệu: http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#configuration-categoryAxis.title.text

Answer 2

Cuối cùng thực hiện bởi Telerik

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

Các văn bản có thể được chia thành nhiều dòng bằng cách sử dụng ký tự thức ăn đường ("\ n").

Xảy ra với văn bản, tiêu đề, nhãn, ghi chú bất kỳ!