Como colocar usar os gráficos de Raphael dentro de um elemento

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 =)

Sobre Felquis

Desenvolvedor Front-end atualmente trabalho focado em desenvolvimento de aplicativos híbridos para iOS e Android. Entusiasta de tecnologias web, tudo envolvendo HTML, CSS e JavaScript também apaixonado por empreendedorismo, métricas, UX, praticamente tudo envolvendo produtos. Twitter @felquis nativebuild.com felquis.com
Esta entrada foi publicada em raphael. Adicione o link permanente aos seus favoritos.