0

フラグのタイトルとフラグのテキストが両方とも一定の長さを超えると、ツールチップがフラグ自体と重なり始めます。したがって、マウスがツールチップの上を移動するのは簡単です。このため、マウスはチャートの真上ではなくツールチップ上にあるため、チャートを操作できません。マウスがツールチップ領域の外に移動した場合にのみ、チャートとの対話を再開します。

フラグがたくさんあると、チャートを操作するのが非常に難しくなります。

ここで長いタイトルの旗にカーソルを合わせてみてください: http://jsfiddle.net/msjaiswal/angnU/

ツールチップがフラグと重なる - ハイチャート

コードは次のとおりです。

$(function() {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=usdeur.json&callback=?', function(data) {

    // Create the chart
    $('#container').highcharts('StockChart', {


        rangeSelector : {
            selected : 1
        },

        title : {
            text : 'USD to EUR exchange rate'
        },

        yAxis : {
            title : {
                text : 'Exchange rate'
            }
        },

        series : [{
            name : 'USD to EUR',
            data : data,
            id : 'dataseries',
            tooltip : {
                valueDecimals: 4
            }
        }, {
            type : 'flags',
            data : [{
                x : Date.UTC(2011, 1, 14),
                title : 'A',
                text : 'Shape: "squarepin"'
            }, {
                x : Date.UTC(2011, 3, 28),
                title : 'Long tooltip title',

                text : 'This is a really really really long tooltip text.'
            }],
            onSeries : 'dataseries',
            shape : 'squarepin',
        }, {
            type : 'flags',
            data : [{
                x : Date.UTC(2011, 2, 1),
                title : 'B',
                text : 'Shape: "circlepin"'
            }, {
                x : Date.UTC(2011, 3, 1),
                title : 'B',
                text : 'Shape: "circlepin"'
            }],
            shape : 'circlepin',
            width : 16
        }, {
            type : 'flags',
            data : [{
                x : Date.UTC(2011, 2, 10),
                title : 'C',
                text : 'Shape: "flag"'
            }, {
                x : Date.UTC(2011, 3, 11),
                title : 'C',
                text : 'Shape: "flag"'
            }],
            color : '#5F86B3',
            fillColor : '#5F86B3',
            onSeries : 'dataseries',
            width : 16,
            style : {// text style
                color : 'white'
            },
            states : {
                hover : {
                    fillColor : '#395C84' // darker
                }
            }
        }]
    });
});

});

これに対するエレガントな回避策はありますか?

4

2 に答える 2

0

実際、私は自分で回避策を見つけました。ツールチップをマウスに追従させることで、マウスがツールチップの上に来ることはありません。これは完全な解決策ではありませんが、問題のない回避策です。使用オプション:

tooltip: {
       followPointer : true
}

デモ: http://jsfiddle.net/msjaiswal/duxam/1/

于 2013-04-22T16:28:44.977 に答える
0

ツールチップポジショナーhttp://api.highcharts.com/highstock#tooltip.positionerも使用できます

于 2013-04-23T09:27:05.400 に答える