0

散布点がプロットの端に配置されると、マウスがプロット領域の点の一部の上にある場合にのみ「ホバー」イベントがトリガーされます。小さなマーカーを使用すると、ユーザーはツールチップの「ピクセルを探す」必要があります。サンプルは次のとおりです: http://jsfiddle.net/Efm4p/4/

$(function () {
var chart;

$(document).ready(function() {
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'scatter',
        },
        xAxis:{
            min:0,
            max: 100},
        yAxis:{
            min:0,
            max:2,
            tickInterval:1,
            lineWidth:1
        },
        series: [{
            marker:{
                lineWidth:1,
                lineColor:'BBBBBB',
                radius:3
            },
            data: [{x: 10, y: 2}, {x: 0.5, y:1}, {x: 0, y: 1}, {x: 12, y: 2}, {x: 11, y: 2}]
        }]
    });
});  

});

この例では、ポイント {x: 0, y: 1} のツールチップを取得するのは非常に困難です。

軸に minPadding/maxPadding を設定しようとしていますが、最小/最大を明確に設定すると機能しません。実際のチャートでは、0 から 100 までの % フォームが X 軸で表示され、カテゴリが Y 軸で表示されるため、最小/最大を明示的に設定することが重要です。一部のポイントは、x 軸で 0% または 100% の値を持ち、y 軸で最初または最後のカテゴリに属します。

Upd：私の質問は、「プロットの端に配置されたポイントに対して「ホバー」を正常に機能させるにはどうすればよいですか？」

4

1 に答える 1

0

これは散布シリーズのデフォルトの動作です。マーカーをホバーしたときにのみツールチップを表示します。シリーズ タイプを に変更しline、 を設定できlineWidth: 0ます。それははるかにうまくいくはずです。

唯一の制限は、線/スプラインのデータを x 値で昇順に並べ替える必要があり、同じ x 値の重複は許可されないことです。データに並べ替えを追加するだけで、その問題は解決します。

(function() { 
    return [{x: 10, y: 2}, {x: 0.5, y:1}, {x: 0, y: 1}, {x: 12, y: 2}, {x: 21, y: 1}]
            .sort(function(a,b){ return a.x - b.x } );
})()

組み合わせ例: http://jsfiddle.net/Efm4p/5/

于 2013-04-05T12:04:27.793 に答える