Gráfico de anillos mínimo con JavaScript y SVG-Donut-Chart. js

Vista prévia

Descripción

Donut-Chart. js es una biblioteca de JavaScript pequeña y fácil que utilizan SVG para dibujar gráficos de anillos dinámicos/anillos en la aplicación Web.

Soporta todos los exploradores Web modernos que soportan el elemento SVG.

Funcionamiento

Cree un elemento HTML en el que desee dibujar el gráfico de anillos.

<div id="mychart"></div>

Coloque el archivo JavaScript ' Donut-Chart. js ' en la parte inferior de la Página Web.

<script src="donut-chart.js"></script>

Inicialice el gráfico de anillos y defina el conjunto de datos en JavaScript como estos:

var myChart = new DonutChart(document.getElementById("mychart"), {


items: [



{ label: "A", value: .2 },



{ label: "B", value: .1 },



{ label: "C", value: .5 },


]
})

Configuración del gráfico de anillos con las siguientes opciones.

var myChart = new DonutChart(document.getElementById("mychart"), {


r: 60,


stroke: 16,


scale: 100,


items: [



{ label: "A", value: .2 },



{ label: "B", value: .1 },



{ label: "C", value: .5 },


]
})

Aplique sus propios estilos CSS al gráfico de anillos.

.chart-item-bg { stroke: #ddd }

.chart-item-0 { stroke: #dd0000 }

.chart-item-1 { stroke: #00cc00 }

.chart-item-2 { stroke: #0000ff }

A veces es posible que necesite actualizar el conjunto de datos.

myChart.update({

items: [


{ label: "D", value: .4 },


{ label: "E", value: .3 },

]
})