使用chart.js中数据表中的数组创建饼图

Question

I have a table with values, and I want to use the data within the table to dynamically create a pie chart. I am trying to store the table data within an array, and then using that array to add the pie chart labels and data. However, the code below does not work:

 var table = document.getElementById("myTable"); var tableArr = []; var tableLen = table.rows.length; for (var i = 1; i < tableLen; i++) { tableArr.push({ name: table.rows[i].cells[0].innerHTML, population: table.rows[i].cells[1].innerHTML, area: table.rows[i].cells[2].innerHTML }); } var canvasP = document.getElementById("pieChart"); var ctxP = canvasP.getContext('2d'); var myPieChart = new Chart(ctxP, { type: 'pie', data: { labels: tableArr["name"], datasets: [{ data: tableArr["population"], backgroundColor: ["#64B5F6", "#FFD54F", "#2196F3", "#FFC107", "#1976D2", "#FFA000", "#0D47A1"], hoverBackgroundColor: ["#B2EBF2", "#FFCCBC", "#4DD0E1", "#FF8A65", "#00BCD4", "#FF5722", "#0097A7"] }] }, options: { legend: { display: true, position: "right" } } }); 

 <script src="https://cdnjs.com/libraries/Chart.js"></script> <table id="myTable"> <tr> <thead> <th scope="col">Village</th> <th scope="col">Population</th> <th scope="col">Area</th> </thead> </tr> <tr> <tbody> <th scope="row">San Jose</th> <td>2,332</td> <td>12.46</td> </tr> <tr> <th scope="row">Santa Maria</th> <td>2,551</td> <td>4.65</td> </tr> <tr> <th scope="row">San Francisco</th> <td>544</td> <td>7.77</td> </tr> </tbody> </table> <canvas id="pieChart"></canvas> 

Answer 1

First of all: make sure, that your markup is valid! Your table is messed up with <thead> and <tbody> tags inside <tr> elements.

Then you need to restructure your data. I recommend to read the documentation on that. You labels and your data need to be array of the same size, where the elements match each other. See the working example below for clarity.

For the data retrieval, it's better to take innerText for you only want to get the text content. Also you need to remove the , from your population data for Chart.js to recognize the number.

 var table = document.getElementById("myTable") var tableLen = table.rows.length var data = {labels: [], population: [], area: [] } for (var i = 1; i < tableLen; i++) { data.labels.push(table.rows[i].cells[0].innerText) data.population.push(table.rows[i].cells[1].innerText.replace(',','')) data.area.push(table.rows[i].cells[2].innerText) } var canvasP = document.getElementById("pieChart") var ctxP = canvasP.getContext('2d') var myPieChart = new Chart(ctxP, { type: 'pie', data: { labels: data.labels, datasets: [{ data: data.population, backgroundColor: ["#64B5F6", "#FFD54F", "#2196F3", "#FFC107", "#1976D2", "#FFA000", "#0D47A1"], hoverBackgroundColor: ["#B2EBF2", "#FFCCBC", "#4DD0E1", "#FF8A65", "#00BCD4", "#FF5722", "#0097A7"] }] }, options: { legend: { display: true, position: "right" } } }) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script> <script src="https://cdnjs.com/libraries/Chart.js"></script> <table id="myTable"> <thead> <tr> <th scope="col">Village</th> <th scope="col">Population</th> <th scope="col">Area</th> </tr> </thead> <tbody> <tr> <th scope="row">San Jose</th> <td>2,332</td> <td>12.46</td> </tr> <tr> <th scope="row">Santa Maria</th> <td>2,551</td> <td>4.65</td> </tr> <tr> <th scope="row">San Francisco</th> <td>544</td> <td>7.77</td> </tr> </tbody> </table> <canvas id="pieChart"></canvas>