0
369
VistasVue + chartjs: el punto más cercano en la información sobre herramientas flotante no funciona
Actualmente estoy tratando de hacer que el gráfico de mi información sobre herramientas (vuejs + chartjs) se ejecute de la siguiente manera:
( Fuente con el modo "modo: más cercano, eje: xy" seleccionado)
Aquí está mi código para el componente:
Vue.component('line-chart', { extends: VueChartJs.Line, mounted () { this.renderChart({ labels: ['Dec 2017', 'Jan 2018', 'Feb 2018', 'Mar 2018', 'Apr 2018', 'May 2018', 'Jun 2018', 'Jul 2018', 'Aug 2018', 'Sep 2018', 'Oct 2018', 'Nov 2018'], datasets: [ { label: '2018 pages read per month', backgroundColor: '#f87979', data: [1238, 1660, 1571, 976, 2344, 1227, 949, 1109, 900, 458, 240, 384] } ] }, {responsive: true, maintainAspectRatio: false, //Here is the part that doesn't seem to work interaction: { axis: 'xy', mode: 'nearest', intersect: false } }) } }); var vm = new Vue({ el: '#app', data: { } });Puedes encontrar mi codepen aquí
De acuerdo con la documentación , no puedo entender lo que me estoy perdiendo ...
1 Respuestas
Responde la pregunta0
Después de parafrasear mi pregunta al extremo, acabo de encontrar un codepen cuyo código no coincide con la documentación PERO responde perfectamente a mi pregunta.
Entonces, para obtener el resultado, debe usar options.tooltips.mode y no options.interaction.mode .
Entonces, tienes que cambiar:
interaction: { axis: 'xy', mode: 'nearest', intersect: false }Por :
tooltips: { mode: 'index', intersect: false, },Aquí está el código final:
Vue.component('line-chart', { extends: VueChartJs.Line, mounted () { this.renderChart({ labels: ['Dec 2017', 'Jan 2018', 'Feb 2018', 'Mar 2018', 'Apr 2018', 'May 2018', 'Jun 2018', 'Jul 2018', 'Aug 2018', 'Sep 2018', 'Oct 2018', 'Nov 2018'], datasets: [ { label: '2018 pages read per month', backgroundColor: '#f87979', data: [1238, 1660, 1571, 976, 2344, 1227, 949, 1109, 900, 458, 240, 384] } ] }, {responsive: true, maintainAspectRatio: false, tooltips: { axis: 'xy', mode: 'nearest', intersect: false } }) } }); var vm = new Vue({ el: '#app', data: { } });Aquí está el codepen funcionando como excepción con información sobre herramientas en el modo más cercano al pasar el cursor por la línea del gráfico.
Resultado final : 