Bom pessoal em alguns casos que vocês forem usar o Raphael, com certeza vão precisar colocar um gráfico dentro de alguma div algum elemento, bom pra isso vamos mudar o jeito que viemos instanciando o Raphael, agora iremos instancia-lo dentro de um elemento, copie o exemplo a seguir e veja o exemplo aqui
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Teste 1 Raphael</title>
<script type="text/javascript" src="raphael-min.js"></script>
<script>
window.onload = function(){
var quadrado = Raphael("box1",250,250);
quadrado.rect(50,50,100,100);
var circulo = Raphael('box2',250,250);
circulo.circle(100,100,40);
var triangulo = Raphael('box3').path('m 100 20O L 50 100 L 150 100 z');
};
</script>
<style>
body{
width:938px;
margin:auto;
}
#box1, #box2, #box3{
width:250px;
height:250px;
display:block;
border:#09F 1px solid;
float:left;
margin:30px;
}
</style>
</head>
<body>
<div id="box1">
</div>
<div id="box2">
</div>
<div id="box3">
</div>
</body>
</html>
Criei 3 div com id diferentes e desenhei um gráfico diferente em cada um,agora vamos analisar o javaScript que usamos
Primeiro criamos um quadrado
var quadrado = Raphael("box1",250,250);
quadrado.rect(50,50,100,100);
Veja que eu uso Raphael(‘id do elemento’, width, height); e este é o segredo com isso você não vai precisar colocar a posição X e Y só vai precisar por a largura e altura.
Veja só como fiz o circulo
var circulo = Raphael('box2',250,250);
circulo.circle(100,100,40);
unica coisa que mudou foi que agora é um circulo e eu o desenhei dentro da div com id box2
Agora o triangulo
var triangulo = Raphael('box3').path('m 100 20O L 50 100 L 150 100 z');
Repare que eu usei uma função que eu ainda não ensinei que é a Path, em breve vou falar sobre ela mas se você já quiser saber como usa-la recomendo que acesse primeiro este tutorial aqui, e depois este aqui só que em inglês.
E se for uma class?
fiz um teste aqui e nenhum funcionou então é isso né pessoal usar ids e pronto. =)
Espero que vocês tenham gostado deste tutorial, até o próximo =)
