2

Kendo UI Datavis Bar Chart があり、グラフ内のバーとそれらのバーのラベルの上にカーソルを置いたときにポインター (ハンド) カーソルを表示したいと考えています。チャートのバーから移動すると、カーソルは標準の矢印ポインターに戻ります。

軸ラベル (左、右、下) と凡例にカーソルを合わせると、カーソルがテキスト カーソルに変わることに気付きました。したがって、上記に加えて、軸ラベルと凡例の上にカーソルを置いたときに、カーソルを標準のカーソル (矢印) のままにしたいと思います (これらは編集できないため)。また、x 軸 (下) のラベルにカーソルを合わせると、カーソルがポインター カーソルに切り替わるようにします。

チャート上にカーソルを置いたときに、チャート全体のポインター カーソルを簡単に表示できますが、それは望ましくありません。

seriesHover イベントを使用してさまざまな戦略を試しましたが、これまでのところ何も機能していません。

上記を達成するにはどうすればよいですか？

トーマスあなたの答えはほとんど私をそこに持っています。ただし、追加情報が 1 つ必要です。

CSS ファイル内で、以下の回答に示されている手法をどのように使用しますか。この動作が必要な剣道 UI チャートと必要でない剣道 UI チャートがいくつかあります。剣道 UI チャート (チャートごとに 1 つの div) を含む div に関連付けられた ID とクラスの両方があります。実際のグラフは、読み込み時に JavaScript コードを使用して作成されます。CSS ファイル内の CSS に以下を追加しようとしましたが、これは効果がありませんでした。

#barChart {
    /*cursor: pointer;*/
    (svg > path):last-child {cusror: pointer;}
}

#barChart は、HTML 内の KendoUI チャートを含む div の ID です。

<div id="barChart" class="bargraph"></div>

事前定義された div 内でロード時に作成されたチャートに対して、以下に示したことを行う方法はありますか? これは、チャートのホバー イベントにフックすることによって行う必要がありますか?

4

4 に答える 4

3

剣道 UI の棒グラフのデモを CSSでスタイリングしてみました。カーソルを手の形に変えたり、テキスト上にデフォルトのカーソルを置いたままにしておくと、どちらも非常にうまく機能します。2 行の CSS を追加するだけで済みました (そして、スクリプト/CSS URL を変更しました):

<html>
<head>
    <title></title>
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://cdn.kendostatic.com/2012.3.1114/js/kendo.all.min.js"></script>
    <link href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.common.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.default.min.css" rel="stylesheet" />
    <style type="text/css">
      /* When hovering over a bar, Kendo dynamically adds
         a bar as the last child of the SVG element that 
         works as an overlay. So, effectively, we're
         hovering over the last (dynamically added) child */   
      svg > path:last-child {cursor:pointer;}
      svg {cursor:default}
    </style>
</head>
<body>

        <div id="example" class="k-content">
            <div class="chart-wrapper">
                <div id="chart" style="background: center no-repeat url('../../content/shared/styles/world-map.png');"></div>
            </div>
            <script>
                function createChart() {
                    $("#chart").kendoChart({
                        theme: $(document).data("kendoSkin") || "default",
                        title: {
                            text: "Internet Users"
                        },
                        legend: {
                            position: "bottom"
                        },
                        chartArea: {
                            background: ""
                        },
                        seriesDefaults: {
                            type: "bar"
                        },
                        series: [{
                            name: "World",
                            data: [15.7, 16.7, 20, 23.5, 26.6]
                        }, {
                            name: "United States",
                            data: [67.96, 68.93, 75, 74, 78]
                        }],
                        valueAxis: {
                            labels: {
                                format: "{0}%"
                            }
                        },
                        categoryAxis: {
                            categories: [2005, 2006, 2007, 2008, 2009]
                        },
                        tooltip: {
                            visible: true,
                            format: "{0}%"
                        }
                    });
                }

                $(document).ready(function() {
                    setTimeout(function() {
                        // Initialize the chart with a delay to make sure
                        // the initial animation is visible
                        createChart();

                        $("#example").bind("kendo:skinChange", function(e) {
                            createChart();
                        });
                    }, 400);
                });
            </script>
        </div>
    <script type="text/javascript">
        console.log("hi")
        document.addEventListener("click",function(e){document.write(e.target)},false)
    </script>

</body>
</html>​

複数のグラフがあり、一部のグラフでのみこの動作が必要な場合は、次のようなクラスを使用することをお勧めします

<div id="barChart" class="bargraph cursorPointer"></div>

そして、CSSを次のように変更します

.cursorPointer svg > path:last-child {cursor:pointer;}
.cursorPointer svg {cursor:default}

(すべてのグラフのテキストに矢印カーソルを表示する場合は.cursorPointer、2 行目の を省略します。)

于 2013-01-02T15:53:20.920 に答える
1

axisLabelClick イベントを定義したラベルでのみカーソルを変更する場合。あなたはこれを行うことができます：

var chart = $("#chart").data("kendoChart");

私の場合、最初のラベルを処理するだけなので、そこにはポインター カーソルのみが必要です。

var idLabel = chart._plotArea.axisY.children[0].options.id; 
$('#' + idLabel).css('cursor', 'pointer');
于 2013-03-27T20:55:46.870 に答える
0

これはまだ Kendo の設定ではないため、@ThomasW が書いたように、グラフ要素にカーソルを合わせたときに表示されるオーバーレイ パスをターゲットにする方法を見つける必要があります。

私の場合、これらのオーバーレイのすべてにあることに気付きfill-opacity="0.2"、これでうまくいきました：

.kendo-chart-wrapper [fill-opacity="0.2"] {
  cursor: pointer;
}
于 2017-04-05T16:13:22.570 に答える
0

興味深いことに、これは私にとって完璧に機能しました（棒グラフ剣道2016のみ）：

  svg > g g g g g g {cursor:pointer;}
  svg {cursor:default}
于 2016-08-13T13:55:53.553 に答える