首页 文章

当图表放大时,Highcharts显示悬停在图表区域外的线上的点

提问于
浏览
0

我最近开始研究highcharts,对于我的项目,我需要以下原型图表,我可以放大或缩小 . 我想仅在用户将鼠标指针精确地移动到点上时才在工具提示中显示y轴值 . 但是在高位图中,如果我将鼠标悬停在线上,它会显示工具提示中最近点的y轴值 . 我的问题是当我放大以查看一组特定的点时,如果我将鼠标悬停在该线上,它会显示图表区域外的点的y轴值 .

http://jsfiddle.net/ssaptarshii/hkn8c27n/

$(function () {
$('#container').highcharts({
    chart:{
        zoomType: 'xy'
    },
    title: {
        text: 'Monthly Average Temperature',
        x: -20 //center
    },
    subtitle: {
        text: 'Source: WorldClimate.com',
        x: -20
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
            'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    yAxis: {
        title: {
            text: 'Temperature (°C)'
        },
        plotLines: [{
            value: 0,
            width: 1,
            color: '#808080'
        }]
    },
    tooltip: {
        valueSuffix: '°C'
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle',
        borderWidth: 0
    },
    series: [{
        name: 'Tokyo',
        data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
    }]
});

});

在上面的链接中,如果我放大_27748518之间的图形的一部分在图表区域之外(上方)然后悬停在 June and July 之间的线段上,那么y轴值(由工具提示显示)对于x轴值( July )变得可见,这已经超出了图形屏幕 . July 的y轴值显示在图表 Headers 附近的某处 .

我不希望在工具提示中显示所有这些y轴值,如果它被放大,它们在图表区域之外,并且我想要禁用该功能以通过悬停在线上来显示点 .

1 回答

  • 0

    怎么样 - fiddle

    添加了以下系列选项:

    type: 'scatter',
    stickyTracking: false,
    lineWidth: 2,
    

相关问题