javascript - 使用 Chart.js 中数据表中的数组创建饼图

Question

我有一个包含值的表，我想使用表中的数据动态创建饼图。我试图将表数据存储在数组中，然后使用该数组添加饼图标签和数据。但是，下面的代码不起作用:

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

首先:确保您的标记有效!你的 table 弄乱了 <thead>和<tbody>里面的标签<tr>元素。

然后你需要重组你的数据。我建议阅读the documentation关于这一点。您的标签和数据需要是相同大小的数组，其中元素彼此匹配。为了清楚起见，请参阅下面的工作示例。

对于数据检索，最好取innerText因为你只想获取文本内容。您还需要删除 ,从您的人口数据中供 Chart.js 识别该数字。

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>