Tengo un gráfico con múltiples puntos / líneas de datos. Actualmente, si pasa el cursor cerca de un punto de datos, mostrará la etiqueta / valor para ese punto.

Lo que me gustaría es lo siguiente: cuando pasa el mouse sobre cualquier parte del gráfico, mostrará las etiquetas + valores para todos los puntos de datos en ese valor x simultáneamente en una sola etiqueta.

Por ejemplo, tomemos los conjuntos de datos dados:

Date (x-labels): ['Jan 01','Jan 02','Jan 03']
Apples Sold: [3,5,1]
Oranges Sold: [0,10,2]
Gallons of Milk Sold: [5,7,4]

Cuando pasa el cursor sobre la mitad del gráfico, sobre el espacio vertical '02 de enero', la etiqueta debe mostrar:

Jan 02
-----------------------
Apples Sold: 5
Oranges Sold: 10
Gallons of Milk Sold: 7

¿Hay una manera simple de lograr esto?

Gracias.

8
Dan 2 mar. 2018 a las 01:29

3 respuestas

La mejor respuesta

¿Hay una manera simple de lograr esto?

SI !! Hay una manera bastante directa de lograr esto. Si hubiera leído la documentación, usted podría haberlo encontrado con bastante facilidad.

De todos modos, básicamente debe establecer el modo de información sobre herramientas en index en sus opciones de gráfico, para lograr el comportamiento que desea.

...
options: {
   tooltips: {
      mode: 'index'
   }
}
...

Además, probablemente desee establecer lo siguiente:

...
options: {
   tooltips: {
      mode: 'index',
      intersect: false
   },
   hover: {
      mode: 'index',
      intersect: false
   }
}
...

Esto hará que todas las interacciones de desplazamiento / etiqueta esperadas ocurran al desplazarse en cualquier lugar del gráfico con el valor x más cercano.

De la documentación:

# index
Encuentra el artículo en el mismo índice. Si la configuración de intersección es verdadera, el El primer elemento de intersección se utiliza para determinar el índice en los datos. Si intersecar falso el elemento más cercano, en la dirección x, se utiliza para determinar el índice

Aquí hay un ejemplo de trabajo:

var ctx = document.getElementById('canvas').getContext('2d');
var chart = new Chart(ctx, {
   type: 'line',
   data: {
      labels: ['Jan 01', 'Jan 02', 'Jan 03'],
      datasets: [{
         label: 'Apples Sold',
         data: [3, 5, 1],
         borderColor: 'rgba(255, 99, 132, 0.8)',
         fill: false
      }, {
         label: 'Oranges Sold',
         data: [0, 10, 2],
         borderColor: 'rgba(255, 206, 86, 0.8)',
         fill: false
      }, {
         label: 'Gallons of Milk Sold',
         data: [5, 7, 4],
         borderColor: 'rgba(54, 162, 235, 0.8)',
         fill: false
      }]
   },
   options: {
      tooltips: {
         mode: 'index',
         intersect: false
      },
      hover: {
         mode: 'index',
         intersect: false
      }
   }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<canvas id="canvas"></canvas>
20
Dan 8 mar. 2018 a las 06:39

Puede lograr esto después de trazar los datos de esta manera: HTML

<div class="container">
  <h2>Chart.js — Line Chart Demo</h2>
  <div>
    <canvas id="myChart"></canvas>
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.min.js"> 
</script>

Css

.container {
  width: 80%;
  margin: 15px auto;
}

Javascript

var ctx = document.getElementById('myChart').getContext('2d');
function convert(str) {
  var date = new Date(str),
    mnth = ("0" + (date.getMonth() + 1)).slice(-2),
    day = ("0" + date.getDate()).slice(-2);
  return [date.getFullYear(), mnth, day].join("-");
}
var date = ["Tue Jun 25 2019 00:00:00 GMT+0530 (India Standard Time)"];
 var y1 = [12];
 var y2 = [32];
 var y3 = [7];
var dataPoints1 = [], dataPoints2 = [], dataPoints3 = [], datep=[];
console.log(date.length)
if(date.length=="1"){
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ["",convert(date[0]),""],
    datasets: [{
      label:"Tweets",
      backgroundColor: "rgba(153,255,51,0.4)",
      fill:false,
      borderColor:"rgba(153,255,51,0.4)",
      data: [null,y1[0],null]
    }, {
      label:"Retweets",
      backgroundColor: "rgba(255,153,0,0.4)",
      fill:false,
      borderColor:"rgba(255,153,0,0.4)",
      data: [null,y2[0],null]
    },{
      label:"Favourites",
      backgroundColor: "rgba(197, 239, 247, 1)",
      fill:false,
      borderColor:"rgba(197, 239, 247, 1)",
      data:[null,y3[0],null]
      }
      ]
  },
  options: {
         scales: {
            xAxes: [{
               gridLines: {
                  display: false
               }
            }],
            yAxes: [{
               ticks: {
                  display: true
               },
               gridLines: {
                  display: false,
               // drawBorder: false //maybe set this as well
               }
            }]
         },
        }
});}
else{
for (var i = 0; i < date.length; i++) {
  datep.push(convert(date[i]))
  dataPoints1.push(y1[i]); 
  dataPoints2.push(y2[i]); 
  dataPoints3.push(y3[i]); 
}
console.log(datep)
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: datep,
    datasets: [{
      label:"Tweets",
      backgroundColor: "rgba(153,255,51,0.4)",
      fill:false,
      borderColor:"rgba(153,255,51,0.4)",
      data: dataPoints1
    }, {
      label:"Retweets",
      backgroundColor: "rgba(255,153,0,0.4)",
      fill:false,
      borderColor:"rgba(255,153,0,0.4)",
      data: dataPoints2
    },{
      label:"Favourites",
      backgroundColor: "rgba(197, 239, 247, 1)",
      fill:false,
      borderColor:"rgba(197, 239, 247, 1)",
      data:dataPoints3
      }
      ]
  },
  options: {
         scales: {
            xAxes: [{
               gridLines: {
                  display: false
               }
            }],
            yAxes: [{
               ticks: {
                  display: true
               },
               gridLines: {
                  display: false,
               // drawBorder: false //maybe set this as well
               }
            }]
         },
        }
});
}

O haga clic en este violín https://jsfiddle.net/gqozfb4L/

0
Vidyush Bakshi 26 jun. 2019 a las 09:43

Puede intentar usar JavaScript para rastrear el mouse del usuario y, según la posición, devolver los datos en ese vértice.

document.querySelector('.button').onmousemove = (e) => {
  const x = e.pageX - e.target.offsetLeft
  const y = e.pageY - e.target.offsetTop
  e.target.style.setProperty('--x', `${ x }px`)
  e.target.style.setProperty('--y', `${ y }px`)
 
}
0
FlySpaceAge 1 mar. 2018 a las 22:40