kendo 图表工具提示在绘图区的自定义位置

Question

我想将 kendo UI 图表中的工具提示定位在绘图区域的自定义位置上。通过使用 kendo-chart-tooltip padding 属性，它只影响 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>

Answer 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

Answer 2

来自 telerik 的人回答了我的问题：

这种情况不支持开箱即用，但是您可以通过使用额外的 CSS 来实现它。例如：

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

这是一个演示 plunker

kendo 图表工具提示在绘图区的自定义位置

kendo chart tooltip custom position on plot area

kendo-ui

kendo-chart

angular

工作DEMO