Gráfico de barras basado en SVG interactivo con JavaScript puro-MDProgressBarChart
| Autor: | maxday |
|---|---|
| Views Total: | 3,306 |
| Sitio oficial: | Ir a la web |
| Actualizado: | May 16, 2015 |
| Licencia: | MIT |
Vista prévia
Descripción
MDProgressBarChart es una biblioteca de JavaScript pura que dibuja progresivamente un gráfico de barras basado en SVG interactiva.
Funcionamiento
Cargue la biblioteca de JavaScript MDProgressBarChart. js en la página HTML.
<script src="MDProgressBarChart.js"></script>
Cree un elemento SVG para el gráfico circular.
<svg width="800" height="400" id="mainSVG"></svg>
Compile la estructura de datos e insértelo en un archivo JSON denominado Data. JSON.
{
"data" : {
"values" : [620, 311, 653, 275, 520, 342],
"marginBetweenBars" : 2,
"barColors" : ["#1ABC9C", "#3498DB", "#9B59B6", "#34495E", "#F1C40F", "#E74C3C"],
"labelColors" : ["#000000"],
"labelFont" : "Verdana",
"labelText" : ["aaa", "bbb", "label 3", "label 4", "something", "final label"],
"labelPaddingLeft" : 10,
"height" : 400,
"width" : 400,
"backgroundColor" : "#445566",
"label" : true,
"value" : true,
"labelWidth" : 50
}
}
