Estoy creando un gráfico de líneas con chart.js. Mi eje x se basa en el tiempo y muestra meses.
Se debe poder hacer clic en cada "columna de mes"/seleccionarla, pero no puedo encontrar una manera de administrar esto. Métodos como getElementAtEvent() devuelven datos, por lo que puedo averiguar qué mes está seleccionado. Pero solo funcionan si el usuario hace clic derecho en un punto, y no en cualquier parte de la "columna".
¿Cómo puedo hacer eso? ¿O ya hay un complemento para esto?
Pude hacer que esto funcionara usando un método de prototipo de escala de tiempo no documentado llamado .getValueForPixel() , que devuelve el valor de escala de la región de escala en la que se hizo clic.
Este método devuelve un objeto de momento que se usó para generar la etiqueta de marca de escala, por lo que puede usar la misma cadena de formato configurada para su escala de tiempo al mostrar este valor (si desea que sean visualmente iguales). Combiné esto con la propiedad genérica de configuración de la opción onClick para obtener un enfoque bastante simple de lo que desea hacer.
Aquí está cómo hacerlo. En su objeto de options , agregue una propiedad onClick usando esta función.
onClick: function(e) { var xLabel = this.scales['x-axis-0'].getValueForPixel(ex); console.log(xLabel.format('MMM YYYY')); alert("clicked x-axis area: " + xLabel.format('MMM YYYY')); },Aquí hay un ejemplo de codepen para verlo en acción.