0,25 código fuente

<! ¿TIPO DE DOCUMENTO? html & gt

& lthtml & gt

& lthead & gt

& lt/head & gt;

& ltbody? align="center "

& ltCanvas? id="dibujo"? ancho="400"? altura="400 " >¿Respuesta? ¿dibujar? ¿de? ¡Qué pasa! </canvas>

<Script? type = " text/JavaScript " & gt;

//Dibujar un gráfico circular

var? ¿Dibujar círculo? =?Función(canvasId, data_arr,?color_arr){

var? ¿dibujar? =?document.getelementbyid(canvasId);

if(drawing.getContext)? {

var? ¿contexto? =?dibujo . obtener contexto(' 2d ');

var? ¿radio? =?drawing.height/2?-20, //Radio

Scalper? =?Radio? +20,?oy? =?Radio? +20;//centro del círculo

var? ¿ancho? =?30,?Altura? =?10,?//Ancho y alto de la leyenda

posX? =? revendedor? *?2?+20,?Percy. =?30;//Posición de la leyenda

var? textoX? =?posX? +?Ancho? +?5,?SMS? =?Percy. +?10;//Posición del texto

var? ¿Ángulo de inicio? =?0,?endAngle? =?0;//Arco inicial y final

context.strokeStyle? =?Púrpura';

Contexto.ancho de línea? =?3;

context.strokeRect(0, 0,?drawing.width,?drawing.height);

for(var?i=0,?len=data_arr. longitud;?i<len?i++)? {

//Dibujar un gráfico circular

endAngle? +=?arr_datos[i]? *?2*Matemáticas. PI;

context.fillStyle? =?color_arr[I];

context.begin ruta();

context.moveTo(ox,oy);

context.arc( buey, ¿Oy? radio,? endAngle? false);

contexto cerrar ruta(); =?endAngle

}

};

var? inicialización? =?Función(){

var? datos_arr? =?[0.05,?0.25,?0.6,?0.1],

color_arr? =?['#00FF21 ',? #FFAA00',? #00AABB',? # ff 4400 '];

drawCircle('dibujo',?data_arr,?color_arr);

};

init();

& lt/script & gt;

& lt/body & gt;

& lt/ html >