我想將kendo UI圖表中的工具提示放置在繪圖區域上的自定義位置上。通過使用kendo-chart-tooltip padding屬性，它只會影響工具提示的內容，請參閱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>

來源

2017-05-11 kirhhof

您可以使用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

來源

2017-05-11 17:46:10 ezanker

嘿嘿，謝謝您的回答！「 - 對不起馬里奧，但我們的公主是在另一座城堡」你提供的解決方案是爲劍道Ui的JavaScript，我使用的是angular2版本，並且不想搞亂jquery。 – kirhhof

@kirhhof，使用seriesHover的概念是一樣的，你只需要以角度的方式來做。 – ezanker

傢伙從Telerik的回答我的問題：

此方案不支持亂但是你可以通過使用addit來實現它離子CSS。舉個例子：

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

這裏是一個演示plunker

來源

2017-05-16 12:49:14 kirhhof

劍道圖工具提示繪圖區域上的自定義位置

回答

工作DEMO

相關問題