【问题标题】：kendo chart tooltip custom position on plot area剑道图表工具提示在绘图区域上的自定义位置
【发布时间】：2017-05-11 11:34:54
【问题描述】：

我想将 kendo UI 图表中的工具提示放置在绘图区域的自定义位置上。通过使用 kendo-chart-tooltip 填充属性，它只影响工具提示的内部内容，请参阅plunker。我想通过在 plotAreaHover 事件上设置工具提示相对于图表的位置，可以帮助我吗？ here is an image of what I need

<kendo-chart [categoryAxis]="{ categories: categories }" (plotAreaHover)="onPlotAreaHover($event)">
    <kendo-chart-title text="GDP annual %"></kendo-chart-title>
    <kendo-chart-legend position="bottom" orientation="horizontal"></kendo-chart-legend>
    <kendo-chart-tooltip [shared]="true" format="{0}%" [padding]="tooltipPadding"></kendo-chart-tooltip>
    <kendo-chart-series>
        <kendo-chart-series-item *ngFor="let item of series"
        type="line" style="smooth" [data]="item.data" [name]="item.name">
        </kendo-chart-series-item>
    </kendo-chart-series>
</kendo-chart>

【问题讨论】：

标签： angular kendo-ui kendo-chart

【解决方案1】：

您可以使用 seriesHover 事件来构建和定位您自己的工具提示。

    seriesHover: function(e){
      var $pos = $("#chart").offset() //position of chart
      var positionX = $pos.left + 30,
          positionY = $pos.top + 2,
          di = e.dataItem;
      // Build tooltip HTML    
      var html =  '<div><strong>' +  di.cat + '</strong></div>';
      html += '<table><tr>';
      html += '<td>India</td><td>' + di.India + '</td>';
      html += '</tr><tr>';
      html += '<td>Russian Federation</td><td>' + di.RF + '</td>';
      html += '</tr><table>';
      //Show and position the tooltip with the html content                       
      $("#customTooltip").show().css("top", positionY).css("left", positionX).html(html);
    }

自定义工具提示的示例 CSS：

  #customTooltip {
    display: none;
    position: absolute;
    background: #eee;
    border-radius: 5px;
    height: auto;
    width: auto;
    border: 1px solid #999;
    padding: 10px;
    box-shadow: 0 6px 12px rgba(0,0,0,0.19), 0 3px 6px rgba(0,0,0,0.23);
  }

工作DEMO

【讨论】：

您好，谢谢您的回答！ “ - 对不起马里奥，但我们的公主在另一座城堡”您提供的解决方案是针对剑道 Ui javascript，我使用的是 angular2 版本，不想弄乱 jquery。
@kirhhof，使用 seriesHover 的概念是一样的，你只需要用角度的方式来做。

【解决方案2】：

telerik 的人回答了我的问题：

开箱即用不支持此方案，但您可以通过使用额外的 CSS 来实现。举个例子：

.k-chart-tooltip-wrapper .k-animation-container {
    position: absolute !important;
    top: 0 !important;
}

这是一个演示plunker

【讨论】：