Detección de eventos de desplazamiento sobre partes de un gráfico usando Chart.js

Esta división ha sido analizado por expertos para que tengas la seguridad de la veracidad de nuestra esta sección.

Solución:

Sé que esto ya recibió una respuesta aceptada, y no estoy seguro de si esto satisface su caso de uso, pero Chart js lanzó una actualización (tal vez hace un mes más o menos) que permitió información sobre herramientas personalizada. Esto permite que se ejecute una función personalizada cuando normalmente se habría dibujado una información sobre herramientas. Tienen un ejemplo en la sección de muestras de git hub.

en resumen, define una función personalizada

 Chart.defaults.global.customTooltips = function(tooltip)//do what you want

aquí está el ejemplo que dan en las muestras con un poco de texto adicional agregado a una información sobre herramientas html. Lo único molesto que veo es que no proporciona el segmento/punto/barra que activó esta información sobre herramientas, lo que sería muy útil, ya que entonces podría hacer algo en el gráfico sabiendo esta información, pero recibe los datos de la información sobre herramientas, lo que significa que usted puede hacer algo con eso en su lugar.

Chart.defaults.global.customTooltips = function (tooltip) 
      // Tooltip Element
      var tooltipEl = $('#chartjs-tooltip');
      // Hide if no tooltip
      if (!tooltip) 
          tooltipEl.css(
              opacity: 0
          );
          return;
      
      // Set caret Position
      tooltipEl.removeClass('above below');
      tooltipEl.addClass(tooltip.yAlign);
      // Set Text
      tooltipEl.html(tooltip.text+ " anythign custom you want");
      // Find Y Location on page
      var top;
      if (tooltip.yAlign == 'above') 
          top = tooltip.y - tooltip.caretHeight - tooltip.caretPadding;
       else 
          top = tooltip.y + tooltip.caretHeight + tooltip.caretPadding;
      
      // Display, position, and set styles for font
      tooltipEl.css(
          opacity: 1,
          left: tooltip.chart.canvas.offsetLeft + tooltip.x + 'px',
          top: tooltip.chart.canvas.offsetTop + top + 'px',
          fontFamily: tooltip.fontFamily,
          fontSize: tooltip.fontSize,
          fontStyle: tooltip.fontStyle,
      );
  ;
  var pieData = [
      value: 300,
      color: "#F7464A",
      highlight: "#FF5A5E",
      label: "Red"
  , 
      value: 50,
      color: "#46BFBD",
      highlight: "#5AD3D1",
      label: "Green"
  , 
      value: 100,
      color: "#FDB45C",
      highlight: "#FFC870",
      label: "Yellow"
  , 
      value: 40,
      color: "#949FB1",
      highlight: "#A8B3C5",
      label: "Grey"
  , 
      value: 120,
      color: "#4D5360",
      highlight: "#616774",
      label: "Dark Grey"
  ];

  var ctx1 = document.getElementById("chart-area1").getContext("2d");
  window.myPie = new Chart(ctx1).Pie(pieData);
  var ctx2 = document.getElementById("chart-area2").getContext("2d");
  window.myPie = new Chart(ctx2).Pie(pieData);

#canvas-holder 
       width: 100%;
       margin-top: 50px;
       text-align: center;
   
   #chartjs-tooltip 
       opacity: 1;
       position: absolute;
       background: rgba(0, 0, 0, .7);
       color: white;
       padding: 3px;
       border-radius: 3px;
       -webkit-transition: all .1s ease;
       transition: all .1s ease;
       pointer-events: none;
       -webkit-transform: translate(-50%, 0);
       transform: translate(-50%, 0);
   
   #chartjs-tooltip.below 
       -webkit-transform: translate(-50%, 0);
       transform: translate(-50%, 0);
   
   #chartjs-tooltip.below:before 
       border: solid;
       border-color: #111 transparent;
       border-color: rgba(0, 0, 0, .8) transparent;
       border-width: 0 8px 8px 8px;
       bottom: 1em;
       content:"";
       display: block;
       left: 50%;
       position: absolute;
       z-index: 99;
       -webkit-transform: translate(-50%, -100%);
       transform: translate(-50%, -100%);
   
   #chartjs-tooltip.above 
       -webkit-transform: translate(-50%, -100%);
       transform: translate(-50%, -100%);
   
   #chartjs-tooltip.above:before 
       border: solid;
       border-color: #111 transparent;
       border-color: rgba(0, 0, 0, .8) transparent;
       border-width: 8px 8px 0 8px;
       bottom: 1em;
       content:"";
       display: block;
       left: 50%;
       top: 100%;
       position: absolute;
       z-index: 99;
       -webkit-transform: translate(-50%, 0);
       transform: translate(-50%, 0);
   

No…

No hay nada en la API ChartJS para anular o ampliar la información sobre herramientas,

Pero, una solución…

Puedes modificar el draw metodo de la Chart.Tooltip clase. Esto le permitiría “hacer otra cosa” cuando ChartJS normalmente representaría la información sobre herramientas.

El método de dibujo que desea vincular comienza en la línea 1351 de la fuente aquí:

https://github.com/nnnick/Chart.js/blob/master/src/Chart.Core.js

La forma en que lo hago es un poco más simple: suponiendo que ya tiene algún código que define el lienzo como
canvas = document.getElementById("chart"); y tu gráfico circular es
window.myPie. Puede usar el evento javascript onmousemove o jQuery hover

canvas.onmousemove = function(evt) 
    var el = window.myPie.getElementsAtEvent(evt);
    //do something with the el object to display other information
    //elsewhere on the page

En mi caso, resalte una fila de la tabla según el valor de el[0]._index

Más adelante puedes encontrar los informes de otros creadores, tú también eres capaz mostrar el tuyo si dominas el tema.

---

---

Utiliza Nuestro Buscador