如何在一列中添加相同的结果- Chart.js

4si2a6ki 于 2023-03-02 发布在 Chart.js

关注(0)|答案(1)|浏览(175)

我正在使用chart.js制作一个图表，我偶然发现了一个小问题。在for和if的帮助下，我从数组中的表中获取值-〉example [2，3，4，5，4，5...] table中唯一可能的数字范围是1到5。但table看起来像这样：2，3，5，4，然后就停在那里了.
如何添加更多的值到图表，例如，如果我有4个5，和其他数字（1，2，3，4）我只有一个，然后使酒吧五最长...
将表中的值放入数组的代码：

for (let i = 0; i < inputNav.length; i++) {
    if(inputNav[i].innerHTML != '') {
        inputValNav = inputNav[i].innerHTML;
        yNav.push(inputValNav);
   }
}

chart.js的代码：

new Chart("chartnavigation", {
    type: "bar",
    data: {
      labels: xNav,
      datasets: [{
        backgroundColor: barColors,
        barPercentage: 0.5,
        data: yNav
      }]
    },
    options: {
      legend: {display: false},
      title: {
        display: true,
        text: "Title"
      },
      scales: {
        y: {
          beginAtZero: true
        }
      }
    }
  });

我是新的chart.js，所以任何帮助是非常感谢！

chart.js

来源：https://stackoverflow.com/questions/75538709/how-to-add-same-results-in-one-column-chart-js

1条答案

按热度按时间

wb1gzix01#

您应该将xNav的值设置为1到5。然后将data定义为Object，以存储xNav中的每个计数值，然后基于inputVal数组对其进行迭代以获得每个计数值。

let inputNav = document.getElementsByClassName('inputNav');
let xNav = [1,2,3,4,5];
let data = {};
let barColors = ['green','red','orange','yellow']; // define this at the number of colors you want

xNav.forEach((x) => { data[x] = 0; });
for (let i = 0; i < inputNav.length; i++) {
  inputValNav = inputNav[i].innerHTML;
  if(inputValNav !== '') {
    data[inputValNav]++;
  }
}
let yNav = Object.values(data);

const ctx = document.getElementById('chartnavigation').getContext('2d');

new Chart(ctx, {
    type: "bar",
    data: {
      labels: xNav,
      datasets: [{
        label: 'data',
        backgroundColor: barColors,
        barPercentage: 0.5,
        data: yNav
      }]
    },
    options: {
      legend: {display: false},
      title: {
        display: true,
        text: "Title"
      },
      scales: {
        y: {
          beginAtZero: true
        }
      }
    }
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.js"></script>
<div>Data :</div>
<table border="1">
  <tr>
    <td>
      <div class="inputNav">2</div>
    </td>
    <td>
      <div class="inputNav">3</div>
    </td>
    <td>
      <div class="inputNav">4</div>
    </td>
    <td>
      <div class="inputNav">5</div>
    </td>
    <td>
      <div class="inputNav">4</div>
    </td>
    <td>
      <div class="inputNav">5</div>
    </td>
    <td>
      <div class="inputNav">5</div>
    </td>
    <td>
      <div class="inputNav">5</div>
    </td>
    <td>
      <div class="inputNav">5</div>
    </td>
    <td>
      <div class="inputNav">5</div>
    </td>
    <td>
      <div class="inputNav">5</div>
    </td>
    <td>
      <div class="inputNav">5</div>
    </td>
  </tr>
</table>

<canvas id="chartnavigation"></canvas>

赞(0）回复(0）举报 2023-03-02

我来回答

如何在一列中添加相同的结果- Chart.js

1条答案

相关问题

热门标签

最新问答