文字：在鼠标悬停时突出显示特定点

Question

Is there a way to highlight a specific point when mouse is over or near that specific point ? The thing is that I don't want to highlight all the lines but only the point(s) under or near my cursor. My goal is to show a tooltip at that position with the informations for that point.

This ChartJs example demonstrate pretty well what I would like to do: http://www.chartjs.org/samples/latest/scales/time/line.html

And these are my current options:

{
    drawPoints: true,
    showRoller: false,
    highlightCircleSize: 5,
    labels: ['Time', 'Vac', 'Temp'],
    ylabel: 'Vaccum (In/Hg)',
    y2label: 'Temperature ('+ TemperatureUnitFactory.getTemperatureUnit() + ')',
    series : {
        'Vac': {
          axis: 'y'
        },
        'Temp': {
          axis: 'y2'
        }
    },
    axes: {
        y: {
            drawGrid: true,
            independentTicks: true,
            valueRange: [0, -32],
            label: 'Vaccum'
        },
        y2: {
            drawGrid: false,
            independentTicks: true,
            valueRange: [
                TemperatureUnitFactory.getTemperatureForUnit(-30),
                TemperatureUnitFactory.getTemperatureForUnit(35)
            ],
            ylabel: 'Temperature'
        }
    }
}

If you feel like I am missing informations that would help you enlighting me, just let me know in a comment.

Thank you all!

Answer 1

So here's a snippet for the solution to my problem. I believe it could be optimized by throtling the mousemouve callback, but in my case it did just fine. I converted the snippet from angular to jQuery for "simplicity".

 var data = [ [new Date(20070101),62,39], [new Date(20070102),62,44], [new Date(20070103),62,42], [new Date(20070104),57,45], [new Date(20070105),54,44], [new Date(20070106),55,36], [new Date(20070107),62,45], [new Date(20070108),66,48], [new Date(20070109),63,39], [new Date(20070110),57,37], [new Date(20070111),50,37], [new Date(20070112),48,35], ]; var graph = new Dygraph( document.getElementById("chart"), data, { rollPeriod: 1, labels: ['Time', 'Vac', 'Temp'], showRoller: false, drawPoints: true, } ); var tooltip = { element: $('#tooltip'), x: function(_x){ this.element.css('left', _x); }, y: function(_y) { this.element.css('top', _y); }, shown: false, throttle: null, currentPointData: null, show: function() { if(!this.shown) { this.element.show(); this.shown = true; } }, hide: function() { this.cancelThrottle(); if(this.shown) { this.element.hide(); this.shown = false; } }, cancelThrottle: function () { if(this.throttle !== null) { clearTimeout(this.throttle); this.throttle = null; } }, bindPoint: function (_point) { this.element.html([_point.point.name,_point.point.xval, _point.point.yval].join(' | ')) console.log('Handle point data', _point); } }; var chartElement = $('#chart'); var isMouseDown = false; chartElement.on('mousedown', function(){ isMouseDown = true; }); chartElement.on('mouseup', function(){ isMouseDown = false; }); chartElement.on('mousemove', function(){ if(graph === null) { return; } if(isMouseDown) { tooltip.hide(); return; } const ACCEPTABLE_OFFSET_RANGE = 8; const TOOLTIP_BOTTOM_OFFSET = 25; const TOOLTIP_THROTTLE_DELAY = 600; var graphPos = Dygraph.findPos(graph.graphDiv), canvasX = Dygraph.pageX(event) - graphPos.x, canvasY = Dygraph.pageY(event) - graphPos.y, rows = graph.numRows(), cols = graph.numColumns(), axes = graph.numAxes(), diffX, diffY, xPos, yPos, inputTime, row, col, axe; for (row = 0; row < rows; row++) { inputTime = graph.getValue(row, 0); xPos = graph.toDomCoords(inputTime, null)[0]; diffX = Math.abs(canvasX - xPos); if (diffX < ACCEPTABLE_OFFSET_RANGE) { for (col = 1; col < cols; col++) { var inputValue = graph.getValue(row, col); if (inputValue === null) { continue; } for(axe = 0; axe < axes; axe++) { yPos = graph.toDomCoords(null, inputValue, axe)[1]; diffY = Math.abs(canvasY - yPos); if (diffY < ACCEPTABLE_OFFSET_RANGE) { tooltip.cancelThrottle(); if(!tooltip.shown) { var self = this; tooltip.throttle = setTimeout(function () { var ttHeight = tooltip.element.height(), ttWidth = tooltip.element.width(); tooltip.x((xPos - (ttWidth / 2))); tooltip.y((yPos - (ttHeight + TOOLTIP_BOTTOM_OFFSET))); tooltip.show(); var closestPoint = graph.findClosestPoint(xPos, yPos); if(closestPoint) { tooltip.bindPoint(closestPoint); } }, TOOLTIP_THROTTLE_DELAY); } return; } } } } } tooltip.hide(); }); 

 .chart-container { position:relative; } .chart-container > .tooltip { position:absolute; padding: 10px 10px; background-color:#ababab; color:#fff; display:none; } 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/dygraph/2.1.0/dygraph.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/dygraph/2.1.0/dygraph.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="chart-container"> <div id="chart"></div> <div id="tooltip" class="tooltip"> Some data to be shown </div> </div>