web-dev-qa-db-ja.com

モリスグラフ。ホバー時にカスタムツールチップを使用する

積み上げ棒グラフを作成するためにmorris.js（ラファエルに依存しています）を使用しています。積み上げ棒ごとに、棒のさまざまなレベルの分割をツールチップとして表示します。 hoverCallback:を使用してみましたが、ホバーしている特定の要素を制御できないようです。その特定のバーのコンテンツのみを取得します。

私はここで同じためのJSBINの例を設定しました：

バーにカーソルを合わせると、下部にバーのインデックスが表示されます。代わりに、コンテンツをツールチップとして表示したいと思います。 JSBINの例

jquerysvgchartsmorris.js
10
Varun Jain

ケーキ。 デモ およびコード：

<script type="text/javascript">
Morris.Bar({
    element: 'bar-example',
    data: [
        {y: '2006',a: 100,b: 90}, 
        {y: '2007',a: 75,b: 65}, 
        {y: '2008',a: 50,b: 40}, 
        {y: '2009',a: 75,b: 65}, 
        {y: '2010',a: 50,b: 40}, 
        {y: '2011',a: 75,b: 65}, 
        {y: '2012',a: 100,b: 90}
    ],
    hoverCallback: function(index, options, content, row) {
        return(content);
    },
    xkey: 'y',
    ykeys: ['a', 'b'],
    stacked: true,
    labels: ['Series A', 'Series B'] // rename it for the 'onhover' caption change
});
</script>

引数：

1：index：レコード番号、つまり0からnレコードを表します。

2：content：これはデフォルトのホバーdivです。

3：option：return（content）;の前に、データはこの中にあります。詳細を表示するには、console.log（options）を実行します。

4：row：以下の行の使用法を確認するのは一例です。

hoverCallback: function (index, options, content, row) {
                     console.log(row);
                     var hover = "<div class='morris-hover-row-label'>"+row.period+"</div><div class='morris-hover-point' style='color: #A4ADD3'><p color:black>"+row.park1+"</p></div>";
                      return hover;
                    },

UPD：

フライングラベルの場合、コードにMorris CSSスタイルシートを追加する必要があります- demo

重要な注意

フライングラベルはバージョン0.4.3以降で機能します

25
Ruben Kazumov

http://jsbin.com/finuqazofe/1/edit?html,js,output

{ y: ..., x: ..., label: "my own label"},'

...
Morris.Line({
    hoverCallback: function(index, options, content) {
        var data = options.data[index];
        $(".morris-hover").html('<div>Custom label: ' + data.label + '</div>');
    },
    ...
    other params
});
6
asdasd