Question

当散点放在情节的边缘时，＆＃39;悬停＆＃39;仅当鼠标位于绘图区域中的一部分点上时才触发事件。使用小标记，用户必须寻找像素＆＃39;对于工具提示。这是样本： 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，但是当我清楚地设置min / max时它们不起作用。明确设置最小值/最大值非常重要，因为实际图表显示x轴表示0到100％，y轴表示％。有些点的x轴值为0％或100％，属于y轴的第一个或最后一个类别。

更新：我的问题是＆＃34;如何制作＆＃39; hover＆＃39;正常的点，放在情节的边缘？＆＃34;

Answer 1

这是散点图系列的默认行为 - 仅在悬停标记时显示工具提示。您可以将系列类型更改为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/

Highcharts散点图。糟糕的工作'悬停'在剧情边缘附近的点

1 个答案: