顯示劍道UI線圖

我想顯示類似下面的提示線圖 - Line Chart on tooltip
爲此，我創建的圖表和工具提示嵌入它使用內容財產顯示劍道UI線圖

content: function (e) { 
      return $("#" + $(e.target).attr("id") + "_tooltip").html(); 
     }

問題是我想顯示一系列的工具提示，這是不是現在正在發生。但如果我將相同的圖表繪製在身體上，而不是將其嵌入到工具提示中，那麼它的工作正常。

有什麼額外的我需要配置來處理這種情況？

dojo link

來源

2017-03-27 Subhash Walunj

你能告訴我們你到目前爲止的代碼？也許創建一個DOJO或CodePen？ – ezanker

@ezanker [Here]（http://dojo.telerik.com/EJoco/8）我創建了一個dojo。請看一下。 –

道場究竟有什麼不工作？當我將鼠標懸停在顯示工具提示文本上時，我在工具提示中看到一個圖表。 – ezanker

你可以讓你的圖表工具提示內容模板，然後創建圖表顯示工具提示時。

DEMO

代碼：

<script id="template" type="text/x-kendo-template"> 
    <div id="myTooltip"> 
    <span>Some Text here</span> 
    <div id="myChart"></div> 
    <span>hover the connectors, not showing tootip</span> 
    </div> 
</script> 

    function CreateTooltipChart(){ 
    // Satter line chart embedded in tooltip 
     $("#myChart").kendoChart({ 
     chartArea: { 
      height: 200, 
      width: 310 
     }, 
     title: { 
      text: "Charge current vs. charge time" 
     }, 
     seriesDefaults: { 
      type: "scatterLine" 
     }, 
     series: [{ 
      data: [[10, 10], [15, 20], [20, 25], [32, 40]] 
     }], 
     xAxis: { 
      max: 35, 
      labels: { 
      format: "{0}m" 
      }, 
     }, 
     yAxis: { 
      max: 50, 
      labels: false 
     }, 
     //tooltip for chart is set here 
     tooltip: { 
      visible: true, 
      format: "{1}% in {0} minutes" 
     } 
     });  
    } 

    // Tooltip on span element 
    var tooltip = $('.show-tooltip').kendoTooltip({ 
     autoHide: false, 
     position: "right", 
     width: 312, 
     //height: 300, 
     show: function(e){ 
     CreateTooltipChart(); 
     }, 
     content: kendo.template($("#template").html()), 
    }).data("kendoTooltip");

來源

2017-03-29 16:21:31 ezanker

非常感謝@ezanker –

顯示劍道UI線圖

回答

相關問題