如何实现Kendo折线图误差棒鼠标悬停时显示/隐藏？

完全可以实现需求，通过监听图表的悬停和离开事件，结合DOM操作控制单个误差棒的显示状态即可，具体实现如下：

1. 默认隐藏所有误差棒：在seriesDefaults.errorBars中设置visible: false，确保初始状态下误差棒不显示
2. 添加事件监听：通过seriesHover和seriesLeave事件，分别控制误差棒的显示与隐藏

修改后的完整代码：

<!DOCTYPE html>
<html>
<head>
    <base href="http://demos.telerik.com/kendo-ui/line-charts/remote-data-binding">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.118/styles/kendo.common.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.118/styles/kendo.default.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.118/styles/kendo.default.mobile.min.css" />

    <script src="https://kendo.cdn.telerik.com/2017.1.118/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2017.1.118/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
    <div class="demo-section k-content wide">
        <div id="chart"></div>
    </div>
    <script>
        function createChart() {
            $("#chart").kendoChart({
                dataSource: [
                    {
                        "country": "Spain",
                        "year": "2008",
                        "unit": "GWh",
                        "solar": 2578,
                        "hydro": 26112,
                        "wind": 32203,
                        "nuclear": 58973,
                        "low":51000,
                        "high":68000
                    },
                    {
                        "country": "Spain",
                        "year": "2007",
                        "unit": "GWh",
                        "solar": 508,
                        "hydro": 30522,
                        "wind": 27568,
                        "nuclear": 55103,
                        "low":52000,
                        "high":60000
                    }
                ],
                title: {
                    text: "Spain electricity production (GWh)"
                },
                legend: {
                    position: "top"
                },
                seriesDefaults: {
                    type: "line",
                    errorLowField: "low",
                    errorHighField: "high",
                    errorBars: {
                        visible: false, // 默认隐藏误差棒
                        endCaps: true,
                        width: 10,
                        color: "darkblue",
                        line: {
                            width: 1,
                            dashType: "solid"
                        }
                    },
                    highlight: {
                        errorBars: {
                            line: {
                                width: 1,
                                dashType: "solid"
                            }
                        }
                    }
                },
                series: [{
                    field: "nuclear",
                    name: "Nuclear"
                }, {
                    field: "hydro",
                    name: "Hydro"
                }, {
                    field: "wind",
                    name: "Wind"
                }],
                categoryAxis: {
                    field: "year",
                    labels: {
                        rotation: -90
                    },
                    crosshair: {
                        visible: false
                    }
                },
                valueAxis: {
                    labels: {
                        format: "N0"
                    },
                    majorUnit: 10000
                },
                tooltip: {
                    visible: false,
                    shared: false,
                    format: "N0"
                },
                // 悬停事件：显示当前数据点的误差棒
                seriesHover: function(e) {
                    var chart = e.sender;
                    // 获取当前系列和数据点索引
                    var seriesIndex = e.series.index;
                    var pointIndex = e.point.index;
                    // 定位到对应误差棒的SVG元素
                    var errorBars = chart.element.find(".k-chart-errorbars");
                    if (errorBars.length > seriesIndex) {
                        var seriesErrorBars = $(errorBars[seriesIndex]).find('.k-errorbar');
                        if (seriesErrorBars.length > pointIndex) {
                            $(seriesErrorBars[pointIndex]).show();
                        }
                    }
                },
                // 离开事件：隐藏当前显示的误差棒
                seriesLeave: function(e) {
                    var chart = e.sender;
                    var seriesIndex = e.series.index;
                    var pointIndex = e.point.index;
                    var errorBars = chart.element.find(".k-chart-errorbars");
                    if (errorBars.length > seriesIndex) {
                        var seriesErrorBars = $(errorBars[seriesIndex]).find('.k-errorbar');
                        if (seriesErrorBars.length > pointIndex) {
                            $(seriesErrorBars[pointIndex]).hide();
                        }
                    }
                }
            });
        }

        $(document).ready(createChart);
        $(document).bind("kendo:skinChange", createChart);
    </script>
</div>
</body>
</html>

说明 #

• 初始状态下所有误差棒通过errorBars.visible: false隐藏
• seriesHover事件触发时，根据当前悬停的系列索引和数据点索引，找到对应的误差棒元素并设置为显示
• seriesLeave事件触发时，隐藏对应的数据点误差棒，确保每次仅显示单个误差棒，避免重叠问题

内容的提问来源于stack exchange，提问作者Swamy