web-dev-qa-db-de.com

Wie implementiere ich Diagramme in Bootstrap?

Ich beziehe mich auf die Balkendiagramme im Hintergrund (sie sind wirklich sehr subtil) der Repositorys hier: Beispiel: https://github.com/search?l=Ruby&q=stars%3A%3E1&s= Gabeln & Typ = Repositories

Was ich habe, ist eine Tabelle, und ich möchte, dass der Hintergrund der Tabellenzellen ein Balkendiagramm des Fortschritts des Benutzers ist. Irgendwelche Hinweise, wie ich dieses Ding erledigen kann?

16
Daryll Santos

Ich möchte vorschlagen, dass Sie HighCharts verwenden. Es ist einfach großartig und einfach zu integrieren.

Beispiel:

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>

Skript:

$(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]

            }]
        });
    });

Und hier ist die Geige .

24
rony36

Github tat dies mit dem HTML canvas Element.

Diese Spezifikation definiert den 2D-Kontext für das HTML-Zeichenflächenelement . Der 2D-Kontext enthält Objekte, Methoden und Eigenschaften zum Zeichnen und Grafiken auf einer Zeichenfläche bearbeiten.

Wenn Sie einen Browser-Inspector verwenden, sehen Sie in jedem Listenelement ein div mit einem canvas -Element.

<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>

Mit CSS (Z-Index, Position ...) können Sie diese Leinwand in Ihrem Fall in den Hintergrund eines Li-Elements oder einer Tabelle stellen.

Führen Sie eine Suche über Jquery-Pluggins aus, die zu Ihrer Anforderung passen.

Ich hoffe, diese Hinweise helfen Ihnen dabei.

4
Lan

Später als meine vorherige Antwort, kann aber trotzdem nützlich sein; Während gRaphaël Charting eine veraltete Alternative sein kann, kann http://chartjs.org - eine neuere und schönere Option sein, die immer noch ohne Flash, mit einer MIT - Lizenz und einem kürzlich aktualisierten GitHub ist.

Ich habe es seit meiner letzten Antwort selbst verwendet, und jetzt habe ich einige Web-Apps mit einer und einige mit der anderen.

Wenn Sie ein Projekt erneut starten, versuchen Sie es zuerst mit Chart.js.

3
Alex Mazzariol

Auf jeden Fall zu spät zur Party; Für Interessenten, die sich mit Lans Erwähnung der HTML5-Leinwand beschäftigen, können Sie trotzdem gRaphaël Charting verwenden, das über eine MIT - Lizenz (anstelle der HighCharts-Doppellizenz) verfügt. Es ist auch nicht Bootstrap-spezifisch, also eher ein allgemeiner Vorschlag.

Ich muss zugeben, dass HighCharts-Demos sehr hübsch erscheinen, und ich muss warnen, dass gRaphaël ziemlich schwer zu verstehen ist, bevor man sich damit auskennt. Auf jeden Fall können Sie Ihren gRaphaël-Diagrammen (z. B. Tooltips oder Zoomeffekte) einfach Nice-Funktionen hinzufügen, so dass sich dies möglicherweise lohnt.

0
Alex Mazzariol

Update 2018

Hier ist ein einfaches Beispiel, das Bootstrap 4 mit ChartJs verwendet. Verwenden Sie ein HTML5-Canvas-Element für das Diagramm ...

<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>

Und dann die entsprechende JS, um das Diagramm zu füllen ...

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
    }
  }
  });
}

Bootstrap 4 Charts Demo

0
Zim