Question

我尝试使用工具提示在单独的js中进行浮动操作，但似乎不起作用。（我只能看到边界）我的图表每隔1000毫秒从jquery获取一次数据，如果数据过多，则将前几个值转移。预先感谢！

Java脚本的开始以及构成工具提示的一半：

$(document).ready(function () {
    let previousPoint = null, previousLabel = null;
    function showTooltip(x, y, color, contents) {
        //console.log(contents);
        $(`<div id="tooltip">${contents}</div>`).css({
            position: 'absolute',
            display: 'none',
            top: y,
            left: x,
            border: `2px solid ${color}`,
            padding: '3px',
                'font-size': '9px',
                'border-radius': '5px',
                'background-color': '#fff',
                'font-family': 'Verdana, Arial, Helvetica, Tahoma, sans-serif',
            opacity: 0.9
        }).appendTo("body").fadeIn(200);
    }

图表的网格选项：

        grid: {
            hoverable: true,
            clickable: true,
            borderWidth: 3,
            mouseActiveRadius: 50,
            axisMargin: 20
        }

获取新数据：

function newData(){
//get data from ajax and push to dataset
            
        }

刷新图表+绘制工具提示的功能

    setInterval(function(){ 
        newData();      
        plot.setData(dataset);
        plot.setupGrid(); //only necessary if your new data will change the axes or grid
        plot.draw();
        $("#allcars").on("plothover", function (event, pos, item) {
            if (item) {
                console.log(item.series.label);
                if ((previousLabel != item.series.label) || (previousPoint != item.dataIndex)) {
                    previousPoint = item.dataIndex;
                    previousLabel = item.series.label;
                    $("#tooltip").remove();

                    var x = item.datapoint[0];
                    var y = item.datapoint[1];

                    var color = item.series.color;
                    console.log(item.pageX);
                    //console.log(item.series.xaxis.ticks[x].label);               

                    showTooltip(item.pageX,
                    item.pageY,
                    color,
                            "<strong>" + item.series.label + "</strong>"  +
                            " : <strong>" + y + "</strong> ");
                }
            } else {
                $("#tooltip").remove();
                console.log("Hmm no points?");
                previousPoint = null;
            }
});
    },1000);
});//document ready

折线图工具提示

0 个答案: