使用chart.js动态创建HTML表中每行的图表

Question

我是使用JavaScript的新手，我试图为HTML表格中的每一行动态创建单独的图表

HTML表格：

使用代码：

<table>
    <tr>
        <th>Property</th>
        <th>France</th>
        <th>Germany</th>
        <th>Italy</th>
        <th>UK</th>
    </tr>
    <tr>
        <th>Coastline</th>
        <td>4,853</td>
        <td>2,389</td>
        <td>7,600</td>
        <td>12,429</td>
    </tr>
    <tr>
        <th>Life Expectancy</th>
        <td>81.8</td>
        <td>80.7</td>
        <td>82.2</td>
        <td>80.7</td>
    </tr>
    <tr>
        <th>Elevation</th>
        <td>375</td>
        <td>263</td>
        <td>538</td>
        <td>162</td>
    </tr>
    <tr>
        <th>Population</th>
        <td>66,836,154</td>
        <td>80,722,792</td>
        <td>62,007,540</td>
        <td>64,430,428</td>
    </tr>
    <tr>
        <th>Age</th>
        <td>41.2</td>
        <td>46.8</td>
        <td>45.1</td>
        <td>40.5</td>
    </tr>
</table>

我想为每一行创建一个单独的图表（即Coastline，Life Expectancy等），每个图表都有国家列标签（法国，德国等）。我一直在尝试使用chart.js，但无论以哪种方式完成工作，我都会感到高兴。

非常感谢任何关于如何做到这一点的建议，谢谢。

Answer 1

要获得预期结果，请使用以下选项，使用chart.js

为每行创建条形图

1. 循环表数据并创建行数据数组

2. 使用行

的唯一ID创建画布

3. 循环遍历数据数组并为每个行数据创建图表

注意：必须根据每行的需要调整比例和图例

代码示例 - https://codepen.io/nagasai/pen/XqrqRj

＆＃13;
＆＃13;
var table = document.querySelector('table')
var tableArr = [];
var tableLab = [];
//loop all rows and form data array
for ( var i = 1; i < table.rows.length; i++ ) {
    tableArr.push([
     table.rows[i].cells[1].innerHTML,
     table.rows[i].cells[2].innerHTML,
     table.rows[i].cells[3].innerHTML,
     table.rows[i].cells[4].innerHTML
    ]);
tableLab.push(table.rows[i].cells[0].innerHTML)
var canvas = document.createElement("canvas");
canvas.setAttribute("id", "myChart"+i);
table.rows[i].cells[5].appendChild(canvas);
}
console.log(tableArr);

//loop array of data and create chart for each row
tableArr.forEach(function(e,i){
  var chartID = "myChart"+ (i+1)
  var ctx = document.getElementById(chartID).getContext('2d');
  var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["France", "Germany", "Italy", "UK"],
        datasets: [{
            label: tableLab[i],
            data: e,
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
});
})
＆＃13;
table ,tr, td,th {
  border:1px solid black;
}
＆＃13;
https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js
<table>
    <tr>
        <th>Property</th>
        <th>France</th>
        <th>Germany</th>
        <th>Italy</th>
        <th>UK</th>
        <th>Chart</th>
    </tr>
    <tr>
        <th>Coastline</th>
        <td>4,853</td>
        <td>2,389</td>
        <td>7,600</td>
        <td>12,429</td>
        <td></td>
    </tr>
    <tr>
        <th>Life Expectancy</th>
        <td>81.8</td>
        <td>80.7</td>
        <td>82.2</td>
        <td>80.7</td>
        <td></td>
    </tr>
    <tr>
        <th>Elevation</th>
        <td>375</td>
        <td>263</td>
        <td>538</td>
        <td>162</td>
        <td></td>
    </tr>
    <tr>
        <th>Population</th>
        <td>66,836,154</td>
        <td>80,722,792</td>
        <td>62,007,540</td>
        <td>64,430,428</td>
        <td></td>
    </tr>
    <tr>
        <th>Age</th>
        <td>41.2</td>
        <td>46.8</td>
        <td>45.1</td>
        <td>40.5</td>
        <td></td>
    </tr>
</table>
＆＃13;
＆＃13;
＆＃13;

Answer 2

在我面前没有IDE，也许你可以这样做：

$('table > tr').each(function() {
    var charName = $(this).find('th:eq(0)').val();
    var france = $(this).find('th:eq(1)').val();
    var germany= $(this).find('th:eq(2)').val();
    var italy= $(this).find('th:eq(3)').val();
    var uk = $(this).find('th:eq(4)').val();

    //Give your chart these values via a method that takes these countries as args
     buildChart(chartName,france, germany, italy, uk);
});

基本上，对于每组table > tr，您希望获取相关国家/地区的数据并使用它来构建自己的图表。你很可能不得不玩这个来使它工作，但这应该有希望指出你正确的方向。