更改 Kendo UI DataViz 迷你图的垂直偏移需要什么？

Question

我熟悉 kendoTooltip 插件并使用过许多其他控件，配置插件的典型方法似乎不起作用。

使用迷你图时，工具提示默认显示在光标右侧。不幸的是，正如您在此图像中看到的那样，这会导致迷你图的任何覆盖区域无法响应悬停输入，这意味着您迫使用户脱离控制并再次进入以查看其他值。

您可以在 Telerik's site 上试用。

我已经尝试在 Kendo UI 的其他区域传递对工具提示有效的配置，在这种情况下，我使用了 position: "top" 并将其应用于具有以下内容的小部件：

        $("#temp-log").kendoSparkline({
            type: "column",
            data: [
                16, 17, 18, 19, 20, 21, 21, 22, 23, 22,
                20, 18, 17, 17, 16, 16, 17, 18, 19, 20,
                21, 22, 23, 25, 24, 24, 22, 22, 23, 22,
                22, 21, 16, 15, 15, 16, 19, 20, 20, 21
            ],
            tooltip: {
                format: "{0} &deg;C",
                position: "top"
            }
        });

但是，此选项未被应用，而其他一些属性（例如 format 和 visible）被应用。

有没有办法改变工具提示的位置，使其不干扰用户交互？

Answer 1

迷你图的工具提示不接受位置。

尝试http://dojo.telerik.com/@harsh/eNUkO

.k-tooltip {
    margin-top:-40px;
    margin-left:20px;
}

如果您不希望工具提示位于其他小部件的顶部，请使用这些样式创建一个 class 并在悬停图表时添加到 k-tooltip 元素。

或 http://dojo.telerik.com/@harsh/OyacA

Html:

<span id="sparkline-chart" class="sparkline"></span>

Js:

$("#sparkline-chart").kendoSparkline({
         type: "column",
         data: [
         16, 17, 18, 19, 20, 21, 21, 22, 23, 22,
         20, 18, 17, 17, 16, 16, 17, 18, 19, 20,
         21, 22, 23, 25, 24, 24, 22, 22, 23, 22,
         22, 21, 16, 15, 15, 16, 19, 20, 20, 21],
         tooltip: {
             format: "{0} &deg;C"
         }
     });

$(".sparkline").on('mouseover', function () {
     $('body').addClass('chart');
 });

 $(".sparkline").on('mouseout', function () {
     $('body').removeClass('chart');
 });

Css:

 .chart .k-chart-tooltip
      {
        margin-top:-40px;
        margin-left:20px;
      }

Answer 2

您可以修改工具提示的锚定代码：

Html 目标：

<span id="temp-log"></span>

图表：

var s = $("#temp-log").kendoSparkline({
    type: "column",
    data: [
        16, 17, 18, 19, 20, 21, 21, 22, 23, 22,
        20, 18, 17, 17, 16, 16, 17, 18, 19, 20,
        21, 22, 23, 25, 24, 24, 22, 22, 23, 22,
        22, 21, 16, 15, 15, 16, 19, 20, 20, 21
    ],
    tooltip: {
        format: "{0} &deg;C"
    }
}).data("kendoSparkline");

这只会更改此特定图表的工具提示：

var templogHeight = $("#temp-log").height();
s._tooltip._slotAnchor = function(point, slot) {
    var result = kendo.dataviz.SharedTooltip.fn._slotAnchor.call(this, point, slot);
    return {
        x: result.x,
        y: result.y - templogHeight
    };
};

(demo)

您还可以通过覆盖小部件并更改小部件的 init 方法中的锚代码来对所有迷你图执行此操作。

更改 Kendo UI DataViz 迷你图的垂直偏移需要什么？

What is required to change the vertical offset of a Kendo UI DataViz sparkline?

javascript

kendo-ui

kendo-dataviz