javascript - Flotplothover 在右下角不起作用

Question

显示我的图表工作正常，但鼠标悬停在点上仅位于图表的顶部 30% 和左侧 10% 一侧，我做错了什么吗？

此代码由多个按钮和更新触发，我是否以错误的方式更新它？

function loadGraph(myArr, percent) {

    var graphData = [{
        color: '#00FF00',
        data: []
    }, {
        color: '#FF0000',
        data: []
    }, {
        color: '#FFFF00',
        data: []
    }];

    var avgPrices = [];

    for (var i = 0; i < 10; i++) {
        var date = new Date(myArr.items[myArr.items.length - (i + 1)].date).getTime();
        if (lines.min == true) {
            graphData[0].data[i] = [date, myArr.items[myArr.items.length - (i + 1)].lowPrice]
        };
        if (lines.max == true) {
            graphData[1].data[i] = [date, myArr.items[myArr.items.length - (i + 1)].highPrice]
        };
        if (lines.avg == true || percent) {
            graphData[2].data[i] = [date, myArr.items[myArr.items.length - (i + 1)].avgPrice]
        };
        avgPrices.push(myArr.items[myArr.items.length - (i + 1)].avgPrice);
    }

    var plotBox = $('#graph-lines');

    var plot = $.plot(plotBox, graphData, {
        series: {
            points: {
                show: true,
                radius: 5
            },
            lines: {
                show: true
            },
            shadowSize: 0
        },
        grid: {
            color: '#00cece',
            borderColor: 'transparent',
            borderWidth: 0,
            hoverable: true
        },
        xaxis: {
            mode: "time"
        },
        yaxis: {
            tickFormatter: function(val, axis) {
                if (percent) {
                    return (val * 100).toFixed(1) + '%'
                } else {
                    return val.toFixed(2)
                }
            },
        }
    });

    var previousPoint = null;
    plotBox.bind('plothover', function(event, pos, item) {
        console.log('hovering!');
        if (item) {
            if (previousPoint !== item.dataIndex) {
                previousPoint = item.dataIndex;
                $('#tooltip').remove();
                var monthNames = ["January", "February", "March", "April", "May", "June",
                    "July", "August", "September", "October", "November", "December"
                ];

                var date = new Date(item.datapoint[0]);
                var x = monthNames[date.getMonth()] + " " + date.getDate() + " - " + date.getFullYear(),
                    y = item.datapoint[1];
                showTooltip(item.pageX, item.pageY, y + ' Interstellar Kredit (ISK) at ' + x);
            }
        } else {
            $('#tooltip').remove();
            previousPoint = null;
        }
    });

};

Answer 1

在获取显示工具提示的代码之前，您是否检查过调试器以查看是否出现错误？我不明白浏览器是如何通过 for 循环的；在我看来，您应该遇到索引越界错误。

尝试按以下方式更改所有三个 if 语句的 if 语句。

if (lines.avg == true || percent) {
            graphData[2].data.push([date, myArr.items[myArr.items.length - (i + 1)].avgPrice]);
        }

在上面的代码中，我将分号移到了 then block 内。另外，我将点推到数组上，而不是访问索引(在您尝试访问它的地方，数组看起来是空的)。