在 Kendo UI 工具提示上显示 Kendo UI 折线图答案

【问题标题】：Displaying Kendo UI line chart on Kendo UI tooltip在 Kendo UI 工具提示上显示 Kendo UI 折线图
【发布时间】：2017-03-27 12:51:39
【问题描述】：

我想在工具提示上显示一个折线图，如下所示 - Line Chart on tooltip
为此，我创建了图表并使用 content 属性将其嵌入到工具提示中

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

问题是我想在一个系列上显示工具提示，但现在没有发生。但是，如果我在正文上绘制相同的图表而不是将其嵌入到工具提示中，它的工作正常。

我需要配置什么额外的东西来处理这种情况吗？

dojo link

【问题讨论】：

你能告诉我们你到目前为止的代码吗？也许创建一个 DOJO 或 CodePen？
@ezanker Here 我创建了一个道场。请看一看。
道场中到底是什么不工作？当我将鼠标悬停在显示工具提示文本上时，我会在工具提示中看到一个图表。
@ezanker 当您将鼠标悬停在系列连接器（系列线上的点）上时，它应该将值显示为图表上的工具提示。但在这种情况下，如果我在工具提示上绘制图表并且当我将鼠标悬停在连接器点上时，该值不可见。感谢您关注此事！

标签： kendo-ui kendo-chart kendo-tooltip

【解决方案1】：

您可以将图表工具提示设为内容模板，然后在显示工具提示时创建图表。

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

【讨论】：

非常感谢@ezanker