• 0
Sign in to follow this  
Pedro H. Martins

Alterando o HighCharts (gerador de gráficos)

Question

Fala galera,

é o seguinte... estou usando o HighCharts (gerador de gráficos)

em uns relatórios do meu sistema.

Só que o gráfico que ele me dá, por padrão quando eu passo o mouse

em uma barra, ele exibe o nome e as coordenadas,

que são respectivamentes os objetos name, x e y

Estou tentando fazer com que quando eu passe o mouse, apareça mais

uma informação personalizada, que eu mesmo colocarei.

Não consegui fazer funcionar da forma que tentei, então vou postar aqui

mesmo da forma errada, pois com certeza vendo a forma errada quem

souber utilizar o HighCharts vai entender o que eu estou pretendendo fazer e pode me ajudar:

$(function () {

var chart;

$(document).ready(function() {

chart = new Highcharts.Chart({

chart: {

renderTo: 'container',

type: 'line',

marginRight: 130,

marginBottom: 25

},

title: {

text: 'Monthly Average Temperature',

x: -20 //center

},

subtitle: {

text: 'Source: WorldClimate.com',

x: -20

},

xAxis: {

categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',

'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']

},

yAxis: {

title: {

text: 'Temperature (°C)'

},

plotLines: [{

value: 0,

width: 1,

color: '#808080'

}]

},

tooltip: {

formatter: function() {

return '<b>'+ this.series.name +'</b><br/>'+

this.x +': '+ this.y +'°C'+

this.series.dados;

}

},

legend: {

layout: 'vertical',

align: 'right',

verticalAlign: 'top',

x: -10,

y: 100,

borderWidth: 0

},

series: [{

name: 'Tokyo',

dados: 'Teste',

data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]

}, {

name: 'New York',

dados: 'Teste',

data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]

}, {

name: 'Berlin',

dados: 'Teste',

data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]

}, {

name: 'London',

dados: 'Teste',

data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]

}]

});

});

});

O que está em vermelho é o que eu quero inserir,

O que está em cinza é o que já funciona perfeitamente e é nativo do sistema HighCharts!!

O erro que está dando é que exibe "UNDEFINED", por não estar resgatando o valor de

this.series.dados, que eu apliquei como 'Teste".

Sei que tá bem complexo a duvida... mas qm já usou e puder me ajudar... agradeço!

Valeu

Edited by Pedro H. Martins

Share this post


Link to post
Share on other sites

1 answer to this question

Recommended Posts

  • 0

Pedro, você está assumindo que o HighCharts pega tudo que é passado dentro do vetor series e salva para ser usado no display.

Conforme você mesmo reparou, não parece ser o caso. Você poderia tentar alterar o javascript do HighCharts, mas o código é bem extenso e não sei se você vai conseguir (eu tentei aqui e não consegui, lol). Porééééém, dá pra dar um migué no script =P

Você já sabe que ele entende o parâmetro "name", então você poder usar isso a seu favor.

Ao invés de fazer:

name: 'Tokyo'
Você pode fazer:
name: {'nome':'Tokyo', 'dados':'Extra', 'outroDado':'Super'}
E aí, na método tooltip, ao invés de usar:
return '<b>'+ this.series.name +'</b><br/>'+ this.x +': '+ this.y +'°C'+ this.series.dados
Você pode mudar para:
return '<b>'+ this.series.name.nome +'</b><br/>'+ this.x +': '+ this.y +'°C'+ this.series.name.dados

;)

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this