radhtmlchart columnseries 图表中的光标手形符号变化

Question

请建议如何在 Telerik radhtmlchart.AS 的鼠标悬停时显示手形符号，现在我只在鼠标悬停时获得指针符号。

<telerik:radhtmlchart runat="server" id="RadHtmlChartfirst" onclientseriesclicked="OnClientSeriesClickedfirst"
                    legend-appearance-position="Top" legend-appearance-visible="true" plotarea-xaxis-minorgridlines-visible="false"
                    plotarea-yaxis-minorgridlines-visible="false" plotarea-xaxis-majorgridlines-visible="false"
                    plotarea-yaxis-majorgridlines-visible="false" height="444" width="900">
                    <PlotArea>
                        <Series>
                            <telerik:ColumnSeries DataFieldY="myValues1" Name="Name1">
                            </telerik:ColumnSeries>
                            <telerik:ColumnSeries DataFieldY="myValues2" Name="Name2">
                            </telerik:ColumnSeries>
                            <telerik:ColumnSeries DataFieldY="myValues3" Name="Name3">
                            </telerik:ColumnSeries>
                        </Series>
                        <XAxis DataLabelsField="myLabels">
                        </XAxis>
                    </PlotArea>
                    <Legend>
                        <Appearance Visible="true" Position="Bottom" />
                    </Legend>
                    <Appearance>
                        <FillStyle BackgroundColor="" />
                    </Appearance>
                    <ChartTitle Text="Reviewer Utilization Report">
                    </ChartTitle>
                </telerik:radhtmlchart>

Answer 1

没有内置工具，因为此图表呈现 SVG，并且光标样式通常适用于 HTML 元素。我尝试了以下脆弱的鼠标事件处理，但它似乎有点工作：

        <telerik:RadHtmlChart runat="server" ID="chart" onmouseout="onmouseoutHandler();">
            <ClientEvents OnSeriesHover="OnSeriesHover" />
            <PlotArea>
                <Series>
                    <telerik:ColumnSeries Name="first">
                        <SeriesItems>
                            <telerik:CategorySeriesItem Y="1" />
                            <telerik:CategorySeriesItem Y="2" />
                            <telerik:CategorySeriesItem Y="3" />
                        </SeriesItems>
                    </telerik:ColumnSeries>
                    <telerik:ColumnSeries Name="second">
                        <SeriesItems>
                            <telerik:CategorySeriesItem Y="1" />
                            <telerik:CategorySeriesItem Y="2" />
                            <telerik:CategorySeriesItem Y="3" />
                        </SeriesItems>
                    </telerik:ColumnSeries>
                </Series>
            </PlotArea>
        </telerik:RadHtmlChart>
        <script>
            function OnSeriesHover(e) {
                document.onmouseover = null;
                if (e.series.name == "first") { //consider adding some conditions or removing them at all
                    e.preventDefault();
                    setTimeout(function () {
                        document.body.style.cursor = "pointer"
                    }, 50);
                }
                return false;
            }

            //attached to onmouseout of the chart wrapper to restore the cursor
            //as soon as the mouse moves on the chart
            function onmouseoutHandler(e) {
                document.body.onmouseover = restoreCursor;
            }
            //the handler that restores the cursor for the page
            function restoreCursor() {
                document.body.style.cursor = "";
            }
            //resets the cursor
            document.body.onmouseover = restoreCursor;
        </script>

我必须添加这个 CSS 以确保我的 body 元素足够大：

        html, body, form
        {
            height: 100%;
            margin: 0;
            padding: 0;
        }