Entrar Ainda não tem acesso?
2
respostas

Selecionar series de gráficos com evento Hightlight/hover

Referente ao curso JavaScript: programando na linguagem da web

por Jeferson Luiz
| 109.2k xp | 11 posts

Eu preciso passar o mouse sobre uma série do gráfico de linha ou barra e automaticamente os mesmos dados são selecionados com efeito de highlight. Estou tendo dificuldade. Alguém pode me ajudar? Observação também adicionei ele no:

https://jsfiddle.net/padrecorj/pf2n3uby/455/

siga o código abaixo: <!--

var data = { labels: ['Flamengo', 'Vasco', 'Fluminense', 'Botafogo', 'Bangu', 'Bonsucesso', 'Resende'], datasets: [{ label: "Tarefa PGDI 270", backgroundColor: [ 'rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(153, 102, 255, 0.2)', 'rgba(255, 159, 64, 0.2)' ], borderColor: [ 'rgba(255,99,132,1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)', 'rgba(153, 102, 255, 1)', 'rgba(255, 159, 64, 1)' ], highlightFill: "rgba(220,220,220,0.75)", highlightStroke: "rgba(220,220,220,1)", borderWidth: 2, hoverBackgroundColor: "black", hoverBorderColor: "black", data: [65, 59, 20, 81, 96, 55, 40, 123], }] }; var option = { legend: false, title: { display: true, },

onHover: function(evt) { var item = myLineChart.getElementAtEvent(evt); if (item.length) { console.log("onHover",item, evt.type); console.log(">data", item[0]._index, data.datasets[0].data[item[0]._index]); }

}, onClick: function(evt) { var el = myLineChart.getElementAtEvent(evt); var el1 = myBarChart.getElementAtEvent(evt); console.log("onHover",el,evt); } }

var myLineChart = Chart.Line('Grafico_de_Linha', { data: data, options: option }); var myBarChart = Chart.Bar('Grafico_de_Barra', { data: data, options: option }); -->

2 respostas
por Luiz Fernando Maehana
| 610.1k xp | 403 posts
Desenvolvedor Front-end

Fala Jeferson,

Não entendi muito bem o seu problema, no link, ao passar o mouse, ele mostra os dados em um tooltip, era essa a ideia mesmo? qual é esse conceito de highlight?

Abraços

por Jeferson Luiz
| 109.2k xp | 11 posts

Luiz, boa tarde!

Assim ele é em Canvas e estou achando dificuldade em fazer com que ele entenda, que ao passar o mouse sobre uma barra do gráfico de barras, ele simultaneamente dê o efeito de highlight, no ponto do gráfico de linha que acusa o valor .

Exemplo tem o gráfico de barras o primeiro valor é Flamengo ,assim como primeiro ponto do gráfico de linha(que poderia ser várias linhas). No caso coloquei 1 linha e os pontos indicam os valores.

Então passando o mouse sobre o ponto da linha Flamengo, tem que automaticamente dar um feito highlight de destaque no de barras e vice-versa. e que isso se faça para todos os demais valores.

Obrigado pelo retorno! abraços!