chart.jsを使用してグラフを作成する必要がありますが、chart.jsのドキュメントを使用して基本グラフを作成しました。しかし、今では、データソースをArrayオブジェクトの代わりにHTML Tableにする必要があります。任意の助けをいただければ幸いですchart.jsを使用してグラフを作成する

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

===================：

は、ここに私のコードです。ありがとうございます。

出典

2016-08-30 Saurabh Shakyawar

この質問Looping through table data with jqueryには、jqueryを使用してテーブルからデータを取り出す方法についての回答があります。理想的には、テーブルがサーバー側から生成されている場合は、JSONデータセットにそのデータセットを渡して、チャートとテーブルの両方でページ上で使用することができます。

出典

2017-01-31 03:09:30 user1488631

これはコメントです –

chart.jsを使用してグラフを作成する

は、ここに私のコードです。 ありがとうございます。

答えて

関連する問題

は、ここに私のコードです。ありがとうございます。