正在使用 DEMO

Question

我想将工具提示从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>

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来实现。举个例子：

<ListView VerticalAlignment="Top"
          Style="{StaticResource ListViewStyle1}"
          ...>

这是一个演示plunker

在情节区

2 个答案:

正在使用 DEMO