Creación de un gráfico de anillos planos flexible con JavaScript y SVG-circleDonutChart

<script src="circleDonutChart.js"></script>

Cree un elemento DIV en el que se creará el gráfico de anillos basado en SVG.

<div id="example"></div>

Dibuje un gráfico de anillos animados en el elemento DIV.

var circle = new circleDonutChart('example');
circle.draw({
end:75,
start:0,
 maxValue:100,
 titlePosition:"outer-top",
 titleText:"Your happiness",
 outerCircleColor:'#0085c8',
 innerCircleColor:'#909081'
});

Available drawing options.

• start: starting value, ignored if chart already has a status
• end: ending value [mandatory]
• outerCircleColor: ovverrides the color of outer circle
• innerCircleColor: ovverrides the color of inner circle
• textColor: ovverrides the color of text
• animationSpeed = 0: no Animation
• animationSpeed = 1: normal speed
• scaling: scaling value, 1 for normal
• size: in px, the size of the chart
• getValue(): gets actual value
• setValue(): sets a value without animation
• unitText: sets the unit for the shown number
• maxValue: optional parameter that overrides 100% with a maximal Value
• titleText: A title for the Chart (less than 12 chars for inner-bottom and inner-top readibility)
• titlePosition: where the title gets displayed, [“outer-bottom” | “outer-top” | “inner-bottom” | “inner-top”]
• titleColor: ovverrides the standard colors for the title
• angleOfStart: the standard starting position is at 3 o'clock (90 degrees)- the value can be overridden. Values are from 0 to 360

Métodos:

• Draw : dibuja el gráfico en función de las opciones dadas
• Draw (después del primer sorteo) : omitiendo las opciones de color posibles
• setValue : establece un valor, sin animar el círculo
• getValue : devuelve el valor real
• Delete : eliminar el objeto de gráfico
• Reload : recargue el objeto gráfico e inicialice con parámetros estándar

Registro de cambios

11/19/2018

• Se agregó soporte para ángulos de inicio personalizados