Zoom sur un tracé Canvasjs et affichage de la plage de l'axe Y

Question

Lors d'un zoom sur un tracé Canvasjs, comment afficher la plage de valeurs de l'axe Y sélectionnée par le curseur dans le contenu de l'info-bulle? Tout simplement, je suis intéressé par l'affichage automatique de la valeur de l'axe Y minimum (Ymin) à gauche et de la valeur de l'axe Y maximum (Ymax) sur la droite sélectionnée par le curseur dans la fenêtre de zoom.

En outre, comment peut-on calculer la différence entre Ymin et Ymax sélectionné dans la fenêtre de zoom par le curseur?

Answer 1

La méthode convertPixelToValue() peut être utilisée pour obtenir la position du curseur dans l'axe Y.

• Définissez la propriété d'affichage des deux zones de texte (à utiliser comme info-bulle) sur aucune.

• L'événement mousedown sera appelé lorsqu'un événement mousedown est déclenché dans la zone de traçage. Et puis l'événement mousemove sera déclenché en faisant glisser le curseur. Ce qui, à son tour, rendra la zone de texte visible, et avec l'aide de convertPixeToValue(), la valeur de l'axe y sera affichée dans la zone de texte. Et sur mouseup les propriétés d'affichage de la zone de texte seraient définies à none.

S'il vous plaît passer par ce jsFiddle suivant - http://jsfiddle.net/p6dq37tt/

var yMinValue = jQuery("#yMinValue"); 
var yMaxValue = jQuery("#yMaxValue"); 
var y1, y2; //To assign the yMin and yMax value to calculate the difference 
var dps = []; 

var chart = new CanvasJS.Chart("chartContainer", { 
    zoomEnabled: true, 
    zoomType: "y", 
    title: { 
    text: "Preview y-values while zooming" 
    }, 
    subtitles: [{ 
    text: "Click and drag to see the values" 
    }], 
    data: [{ 
    type: "line", 
    dataPoints: dps 
    }] 
}); 
chart.render(); 

function mousemovehandler(e) { 
    var parentOffset = jQuery(this).parent().offset(); 
    var relX = e.pageX - parentOffset.left; 
    var relY = e.pageY - parentOffset.top 

    var xValue = Math.round(chart.axisX[0].convertPixelToValue(relX)); 
    var yValue = Math.round(chart.axisY[0].convertPixelToValue(relY)); 

    y1 = yValue; 

    var valueDiff = y1 - y2; //calculating the difference 

    if(xValue >= chart.axisX[0].minimum || xValue <= chart.axisX[0].maximum) { 
    yMinValue.css({ 
     left: e.pageX - 50, 
     top: e.pageY - 20 
    }); //assigning the position for the yMinValue 

    jQuery("#yMinValue").val(yValue); 
    } 

    jQuery("#divDifference").val(Math.abs(valueDiff)); 
    jQuery("#yMaxValue").removeClass("textbox");   //removing the textbox class 
    jQuery("#yMinValue").removeClass("textbox"); 
} 

var parentElement = jQuery(".canvasjs-chart-toolbar"); 
var childElement = document.getElementsByTagName("button"); 

//for displaying the yMaxValue when the mousedown event is fired. 
jQuery(".canvasjs-chart-canvas").last().on("mousedown", function(e) { 
    if (childElement[0].getAttribute("state") === "pan") { //checking whether the event trigger is zoom or pan. 
    var parentOffset = jQuery(this).parent().offset(); 
    var relY = e.pageY - parentOffset.top 
    var yValue = Math.round(chart.axisY[0].convertPixelToValue(relY)); 
    //assigning value of y2 used to calculate the difference. 
    y2 = yValue; 

    yMaxValue.css({ 
     left: e.pageX - 50, 
     top: e.pageY - 20 
    }); 
    yMinValue.css({ 
     left: e.pageX - 50, 
     top: e.pageY - 20 
    }); 

    //hidding the yMinValue behind the yMaxValue. 
    var yvalue = document.getElementById("yMaxValue"); 
    yvalue.setAttribute("value", yValue); 
    jQuery(".canvasjs-chart-canvas").last().on("mousemove", mousemovehandler); 
    } 
}); 

//To hide toolTips when mouse is released 
jQuery(".canvasjs-chart-canvas").last().on("mouseup", function(e) { 
    jQuery("#yMinValue").addClass("textbox"); 
    jQuery("#yMaxValue").addClass("textbox"); 
    jQuery(".canvasjs-chart-canvas").last().off("mousemove"); 
}); 

var xVal = 0; 
var yVal = 15; 

for (var i = 0; i < 1000; i++) { 
    yVal = yVal + Math.round(5 + Math.random() * (-5 - 5)); 
    dps.push({ 
    x: xVal, 
    y: yVal 
    }); 
    xVal++; 
} 
chart.render();