web-dev-qa-db-fra.com

Comment implémenter des graphiques dans Bootstrap?

Je me réfère aux graphiques à barres en arrière-plan (ils sont en réalité très subtils) des référentiels ici: Exemple: https://github.com/search?l=Ruby&q=stars%3A%3E1&s= forks & type = Repositories

Ce que j'ai est un tableau et je veux que l'arrière-plan des cellules du tableau soit un diagramme à barres de la progression de l'utilisateur. Des indications sur la façon dont je réussis cette chose?

cssruby-on-railstwitter-bootstrap
16
Daryll Santos

Je voudrais vous suggérer d'utiliser HighCharts . C'est juste génial et facile à intégrer.

Exemple:

HTML:

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

Script:

$(function () {
        $('#container').highcharts({
            chart: {
                type: 'column'
            },
            title: {
                text: 'Monthly Average Rainfall'
            },
            subtitle: {
                text: 'Source: WorldClimate.com'
            },
            xAxis: {
                categories: [
                    'Jan',
                    'Feb',
                    'Mar',
                    'Apr',
                    'May',
                    'Jun',
                    'Jul',
                    'Aug',
                    'Sep',
                    'Oct',
                    'Nov',
                    'Dec'
                ]
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Rainfall (mm)'
                }
            },
            tooltip: {
                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0
                }
            },
            series: [{
                name: 'Tokyo',
                data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]

            }, {
                name: 'New York',
                data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3]

            }, {
                name: 'London',
                data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]

            }, {
                name: 'Berlin',
                data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]

            }]
        });
    });

Et voici le violon .

24
rony36

Github l'a fait en utilisant l'élément HTML canvas .

Cette spécification définit le contexte 2D pour l'élément de canevas HTML . Le contexte 2D fournit des objets, des méthodes et des propriétés pour dessiner et manipuler des graphiques sur une surface de dessin en toile.

Si vous utilisez un inspecteur de navigateur, chaque élément de la liste contient un div avec un élément canvas.

<div class="participation-graph">
   <canvas class="bars" data-color-all="#F5F5F5" data-color-owner="#F5F5F5" data-source="/mxcl/homebrew/graphs/owner_participation" height="80" width="640"></canvas>
</div>

Avec CSS (z-index, position ...), vous pouvez mettre cette toile à l'arrière-plan d'un élément li ou d'une table, dans votre cas.

Faites une recherche sur les plug-ins jquery qui répondent à vos besoins.

J'espère que ces indications vous aideront à atteindre cet objectif.

4
Lan

Plus tard que ma réponse précédente, mais peut être utile quand même; Alors que gRaphaël Charting peut être une alternative obsolète, une option plus récente et plus intéressante peut être http://chartjs.org - toujours sans Flash, avec une licence MIT et un GitHub récemment mis à jour.

Je l'utilise moi-même depuis ma dernière réponse. J'ai donc maintenant quelques applications Web avec l'une et d'autres avec l'autre.

Si vous démarrez un projet à nouveau, essayez d’abord avec Chart.js.

3
Alex Mazzariol

Certainement en retard à la fête; Quoi qu'il en soit, pour ceux que cela intéresse, comme le dit si bien Lan, il est possible d'utiliser -Raphaël Charting qui possède une licence MIT (au lieu de la licence double HighCharts). Ce n'est pas non plus spécifique à Bootstrap, donc c'est plutôt une suggestion générale.

Je dois admettre que les démos de HighCharts sont très jolies, et je dois avertir que gRaphaël est assez difficile à comprendre avant de pouvoir en maîtriser le fonctionnement. Quoi qu'il en soit, vous pouvez facilement ajouter des fonctionnalités intéressantes à vos graphiques de gRaphaël (par exemple, des info-bulles ou des effets de zoom), afin que vos efforts en valent la peine.

0
Alex Mazzariol

Mise à jour 2018

Voici un exemple simple utilisant Bootstrap 4 avec ChartJs. Utilisez un élément HTML5 Canvas pour le graphique ...

<div class="container">
    <div class="row">
        <div class="col-md-6">
            <div class="card">
                <div class="card-body">
                    <canvas id="chLine"></canvas>
                </div>
            </div>
        </div>
     </div>     
</div>

Et puis le JS approprié pour remplir le graphique ...

var colors = ['#007bff','#28a745'];
var chLine = document.getElementById("chLine");
var chartData = {
  labels: ["S", "M", "T", "W", "T", "F", "S"],
  datasets: [{
    data: [589, 445, 483, 503, 689, 692, 634],
    borderColor: colors[0],
    borderWidth: 4,
    pointBackgroundColor: colors[0]
  },
  {
    data: [639, 465, 493, 478, 589, 632, 674],
    borderColor: colors[1],
    borderWidth: 4,
    pointBackgroundColor: colors[1]
  }]
};
if (chLine) {
  new Chart(chLine, {
  type: 'line',
  data: chartData,
  options: {
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: false
        }
      }]
    },
    legend: {
      display: false
    }
  }
  });
}

Démo Bootstrap 4 Charts

0
Zim