剣道のドーナツチャートにテキストを配置

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