Ich muss Diagramme mit chart.js erstellen, habe jedoch ein grundlegendes Diagramm mit der Dokumentation von chart.js erstellt. Aber jetzt möchte ich, dass die Datenquelle HTML-Tabelle anstelle von Array-Objekt ist.Erstellen von Diagrammen mit chart.js

Hier ist mein Code:

<!DOCTYPE HTML> 
<html> 

<head></head> 

<body> 
    <canvas id="c" width="500" height="500"></canvas> 
    <script src="chart.js"></script> 
    <script> 
    var ctx = document.getElementById("c").getContext("2d"); 

    var data = { 
     labels: ["January", "February", "March", "April", "May", "June", "July"], 
     datasets: [{ 
     label: "My First dataset", 
     fillColor: "rgba(220,220,220,0.2)", 
     strokeColor: "rgba(220,220,220,1)", 
     pointColor: "rgba(220,220,220,1)", 
     pointStrokeColor: "#fff", 
     pointHighlightFill: "#fff", 
     pointHighlightStroke: "rgba(220,220,220,1)", 
     data: [65, 59, 80, 81, 56, 55, 40] 
     }, { 
     label: "My Second dataset", 
     fillColor: "rgba(151,187,205,0.2)", 
     strokeColor: "rgba(151,187,205,1)", 
     pointColor: "rgba(151,187,205,1)", 
     pointStrokeColor: "#fff", 
     pointHighlightFill: "#fff", 
     pointHighlightStroke: "rgba(151,187,205,1)", 
     data: [28, 48, 40, 19, 86, 27, 90] 
     }] 
    }; 
    var MyNewChart = new Chart(ctx).Line(data); 
    </script> 

    <table id="datatable"> 
    <thead> 
     <tr> 
      <th></th> 
      <th>Jane</th> 

      <th>Jordan</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <th>Apples</th> 
      <td>3</td> 
      <td>4</td> 
     </tr> 
     <tr> 
      <th>Pears</th> 
      <td>2</td> 
      <td>0</td> 
     </tr> 
     <tr> 
      <th>Plums</th> 
      <td>5</td> 
      <td>11</td> 
     </tr> 
     <tr> 
      <th>Bananas</th> 
      <td>1</td> 
      <td>1</td> 
     </tr> 
     <tr> 
      <th>Oranges</th> 
      <td>2</td> 
      <td>4</td> 
     </tr> 
     <tr> 
      <th>Carret</th> 
      <td>6</td> 
      <td>4</td> 
     </tr> 
    </tbody> 
</table> 
</body> 

</html>

===================

Jede Hilfe würde geschätzt. Danksagungen und Grüße

Quelle

2016-08-30 Saurabh Shakyawar

Diese Frage Looping through table data with jquery hat Antworten, die diskutieren, wie Daten aus einer Tabelle mit jQuery abgerufen werden. Im Idealfall können Sie, wenn Ihre Tabelle serverseitig generiert wird, diesen Datensatz in einen JSON-Datensatz übernehmen, der auf der Seite sowohl von Diagramm als auch von Tabelle verwendet wird.

Quelle

2017-01-31 03:09:30 user1488631

Dies sollte ein Kommentar sein –

Erstellen von Diagrammen mit chart.js

Hier ist mein Code:

Antwort

Verwandte Themen