Un gráfico en bootstrap es una representación gráfica para la visualización de datos, en la que los datos se representan mediante símbolos. Los diversos tipos de gráficos, como un gráfico de barras, un gráfico de líneas, un gráfico circular, un gráfico de anillos, etc., se crean con la ayuda de Bootstrap. En otras palabras, podemos decir que chart es un tipo de diagrama o gráfico, que organiza y representa un conjunto de datos numéricos o cualitativos.
Ejemplo 1: Estamos creando un gráfico de líneas usando bootstrap y JavaScript. En este ejemplo, hemos utilizado el archivo chart.js para crear un gráfico. Los datos se crean según el tipo de gráfico. El siguiente gráfico tiene el tipo “línea” con 2 datos diferentes tanto para las horas de trabajo como para las horas libres.
HTML
<html>
<link
rel=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"
type="text/css"
/>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script
src=
"https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"
type="text/javascript"
></script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.2/Chart.min.js"></script>
<style>
.container {
width: 70%;
margin: 15px auto;
}
body {
text-align: center;
color: green;
}
h2 {
text-align: center;
font-family: "Verdana", sans-serif;
font-size: 30px;
}
</style>
<body>
<div class="container">
<h2>Line Chart</h2>
<div>
<canvas id="myChart"></canvas>
</div>
</div>
</body>
<script>
var ctx = document.getElementById("myChart").getContext("2d");
var myChart = new Chart(ctx, {
type: "line",
data: {
labels: [
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday",
"Sunday",
],
datasets: [
{
label: "work load",
data: [2, 9, 3, 17, 6, 3, 7],
backgroundColor: "rgba(153,205,1,0.6)",
},
{
label: "free hours",
data: [2, 2, 5, 5, 2, 1, 10],
backgroundColor: "rgba(155,153,10,0.6)",
},
],
},
});
</script>
</html>
Producción:
gráfico de líneas con horas de trabajo y libres
Ejemplo 2: En el siguiente ejemplo, creamos un gráfico de anillos usando bootstrap y JavaScript. En este ejemplo también, hemos usado el archivo chart.js para crear un gráfico de anillos.
HTML
<html>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src=
"https://cdn.jsdelivr.net/npm/billboard.js/dist/billboard.min.js"></script>
<link
rel="stylesheet"
href=
"https://cdn.jsdelivr.net/npm/billboard.js/dist/billboard.min.css"
/>
<link
rel=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"
type="text/css"
/>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.1/Chart.min.js">
</script>
<style>
body {
text-align: center;
color: green;
}
h2 {
text-align: center;
font-family: "Verdana", sans-serif;
font-size: 40px;
}
</style>
<body>
<div class="col-xs-12 text-center">
<h2>Donut Chart</h2>
</div>
<div id="donut-chart"></div>
<script>
var chart = bb.generate({
data: {
columns: [
["Blue", 2],
["orange", 4],
["green", 3],
],
type: "donut",
onclick: function (d, i) {
console.log("onclick", d, i);
},
onover: function (d, i) {
console.log("onover", d, i);
},
onout: function (d, i) {
console.log("onout", d, i);
},
},
donut: {
title: "70",
},
bindto: "#donut-chart",
});
</script>
</body>
</html>
Producción:
gráfico de anillos
Publicación traducida automáticamente
Artículo escrito por itskawal2000 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA