Поместите текст в диаграмму пончика кендо

Question

Я пытаюсь создать диаграмму кружочка полукруга, чтобы показать некоторые данные о ходе. Это я смог завершить. Далее мне нужно было разместить текст внутри/центра диаграммы пончика, который снова я смог сделать успешно. Теперь у меня есть новое требование, когда мне нужно показать текст в начальном и конечном положениях графика (мне нужно, чтобы 0% и 100% отображались на любой оси). Я пробовал несколько способов без всякого шума. Не могли бы вы помочь мне с возможным решением. Пожалуйста, найдите додзё я создал здесь:

http://dojo.telerik.com/Exike

Это примерно то, что я хотел бы мой конечный результат, чтобы выглядеть как:

Любые предложения по тем же?

Заранее спасибо.

Answer 1

Вы можете добавить несколько текстовых полей для вашей визуализации функции и использовать рамку, чтобы разместить их:

render: function (e) { 
      var draw = kendo.drawing; 
      var geom = kendo.geometry; 
      var chart = e.sender; 

      // The center and radius are populated by now. 
      // We can ask a circle geometry to calculate the bounding rectangle for us.     
      var circleGeometry = new geom.Circle(center, radius); 
      var bbox = circleGeometry.bbox(); 

      // Render the text     
      var text = new draw.Text("33%", [0, 0], { 
       font: "18px Verdana,Arial,sans-serif" 
      }); 
      // Align the text in the bounding box     
      draw.align([text], bbox, "center"); 
      draw.vAlign([text], bbox, "center"); 

      var text0 = new draw.Text("0%", [bbox.origin.x, bbox.origin.y + bbox.size.height/2 ], { 
       font: "10px Verdana,Arial,sans-serif" 
      }); 
      var text100 = new draw.Text("100%", [bbox.origin.x + bbox.size.width - 28, bbox.origin.y + bbox.size.height/2 ], { 
       font: "10px Verdana,Arial,sans-serif" 
      }); 

      // Draw it on the Chart drawing surface 
      e.sender.surface.draw(text); 
      e.sender.surface.draw(text0); 
      e.sender.surface.draw(text100); 
     }