更改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} °C",
                position: "top"
            }
        });

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

有没有办法改变工具提示的位置，这样就不会干扰用户互动？

Answer 1

迷你图表中的工具提示并不接受某个位置。

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

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

如果您不希望工具提示位于其他小部件的顶部，请创建具有这些样式的类，并在图表悬停时添加到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} °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} °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方法中的锚码来为所有迷你图表执行此操作。