Biblioteca de gráfico de tarta múltiple basada en SVG-MDMPC
| Autor: | maxday |
|---|---|
| Views Total: | 2,325 |
| Sitio oficial: | Ir a la web |
| Actualizado: | February 27, 2015 |
| Licencia: | MIT |
Vista prévia
Descripción
MDMPC es una pequeña biblioteca de JavaScript que se utiliza para generar un gráfico de tarta múltiple utilizando JavaScript y SVG.
Funcionamiento
Cargue la biblioteca de JavaScript MDMPC en la parte inferior de la Página Web.
<script src="MDMPC.js"></script>
Cree un elemento SVG para el gráfico circular.
<svg id="MDMultiplePieChart" width="12cm" height="12cm" viewBox="0 0 1000 1000"> <rect width="1000" height="1000" style="fill:rgb(255,255,255)"> </svg>
Prepare sus datos siguiendo la estructura así:
var data = {
category: [{
label: "2012 Summer Olympics medals (20 first countries)",
value: "1",
color: "#84888E",
alpha: "20",
category: [
{
label: "America",
color: "#1ABC9C",
category: [{
label: "United States",
category: [{
label: "Gold",
value: "46",
}, {
label: "Silver",
value: "29",
}, {
label: "Bronze",
value: "29",
}]
}, {
label: "Cuba",
category: [{
label: "Gold",
value: "5",
}, {
label: "Silver",
value: "3",
}, {
label: "Bronze",
value: "7",
}]
}, {
label: "Jamaica",
category: [{
label: "Gold",
value: "4",
}, {
label: "Silver",
value: "4",
}, {
label: "Bronze",
value: "4",
}]
}]
}, {
label: "Europe",
color: "#3498DB",
category: [{
label: "Great Britain",
category: [{
label: "Gold",
value: "29",
}, {
label: "Silver",
value: "17",
}, {
label: "Bronze",
value: "19",
}]
}, {
label: "Russia",
category: [{
label: "Gold",
value: "24",
}, {
label: "Silver",
value: "25",
}, {
label: "Bronze",
value: "32",
}]
}, {
label: "Germany",
category: [{
label: "Gold",
value: "11",
}, {
label: "Silver",
value: "19",
}, {
label: "Bronze",
value: "14",
}]
}, {
label: "France",
category: [{
label: "Gold",
value: "11",
}, {
label: "Silver",
value: "11",
}, {
label: "Bronze",
value: "12",
}]
}, {
label: "Italy",
category: [{
label: "Gold",
value: "8",
}, {
label: "Silver",
value: "9",
}, {
label: "Bronze",
value: "11",
}]
}, {
label: "Hungary",
category: [{
label: "Gold",
value: "8",
}, {
label: "Silver",
value: "4",
}, {
label: "Bronze",
value: "6",
}]
}, {
label: "Netherlands ",
category: [{
label: "Gold",
value: "6",
}, {
label: "Silver",
value: "6",
}, {
label: "Bronze",
value: "8",
}]
}, {
label: "Ukraine",
category: [{
label: "Gold",
value: "6",
}, {
label: "Silver",
value: "5",
}, {
label: "Bronze",
value: "9",
}]
}, {
label: "Czech Republic",
category: [{
label: "Gold",
value: "4",
}, {
label: "Silver",
value: "3",
}, {
label: "Bronze",
value: "3",
}]
}]
}, {
label: "Asia",
color: "#9B59B6",
category: [{
label: "China",
category: [{
label: "Gold",
value: "38",
}, {
label: "Silver",
value: "27",
}, {
label: "Bronze",
value: "19",
}]
}, {
label: "South Korea",
category: [{
label: "Gold",
value: "13",
}, {
label: "Silver",
value: "8",
}, {
label: "Bronze",
value: "7",
}]
}, {
label: "Kazakhstan",
category: [{
label: "Gold",
value: "7",
}, {
label: "Silver",
value: "1",
}, {
label: "Bronze",
value: "5",
}]
}, {
label: "Iran",
category: [{
label: "Gold",
value: "4",
}, {
label: "Silver",
value: "5",
}, {
label: "Bronze",
value: "3",
}]
}, {
label: "Japan",
category: [{
label: "Gold",
value: "7",
}, {
label: "Silver",
value: "14",
}, {
label: "Bronze",
value: "17",
}]
}, {
label: "North Korea",
category: [{
label: "Gold",
value: "4",
}, {
label: "Silver",
value: "0",
}, {
label: "Bronze",
value: "2",
}]
}]
}, {
label: "Oceania",
color: "#F1C40F",
category: [{
label: "Australia",
category: [{
label: "Gold",
value: "7",
}, {
label: "Silver",
value: "16",
}, {
label: "Bronze",
value: "12",
}]
}, {
label: "New Zealand",
category: [{
label: "Gold",
value: "6",
}, {
label: "Silver",
value: "2",
}, {
label: "Bronze",
value: "5",
}]
}]
}
]
}]
};
