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를 사용하여 차트 만들기

다음은 내 코드입니다. 감사합니다 및 감사합니다

답변

관련 문제