无法在html/JavaScript中使用charts.js循环数据以打印图表

4ngedf3f 于 2023-10-18 发布在 Chart.js

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

我是JavaScript的新手，我已经坚持了一段时间了。我试图通过循环的dataframe，我从 flask ，我试图生成条形图w.r.t的列中存在的dataframe。（我在这里使用了一个示例数据，尽管我在原始代码中将dataframe转换为list）。
但我只得到一个图表w.r.t的第一个元素的itemData。我哪里做错了？是否与画布仅创建一次有关？你的帮助将不胜感激。

let labels = ['P1', 'P2', 'P3', 'P4', 'P5', 'P6'];

let itemData = [
  [12, 13, 14, 15, 16, 17],
  [19, 20, 21, 22, 23, 24],
  [3, 4, 5, 6, 7, 8],
  [5, 6, 7, 8, 9, 10],
  [10, 11, 12, 13.14, 15],
  [27, 28, 29, 30, 31, 32]
];

let text = ['t1', 't2', 't3', 't4', 't5', 't6'];

for (let i = 0; i < itemData.length; i++) {
  const data = {
    labels: labels,
    datasets: [{
      data: itemData[i],
      backgroundColor: 'green'
    }]
  };

  const config = {
    type: 'bar',
    data: data,
    options: {
      plugins: {
        legend: {
          display: false
        },
        title: {
          display: true,
          text: text[i]
        }
      }
    }
  };

  const chart = new Chart(
    document.getElementById('myChart'),
    config
  );
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.3.2/chart.umd.min.js" integrity="sha512-ziISJqd7FOx3QNvnXiFWAfgSKqte9jMjzhrCnc7Gxpxfxjb5FdrBFg673DloeFEH6VLmTeo86yu5y/xJm38cBg==" crossorigin="anonymous" referrerpolicy="no-referrer">
</script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
<div class="container">
  <br>
  <p><a href="/" class="btn btn-secondary btn">Back to Charts & Analysis</a></p>

  <h4>Feature-wise Analysis</h4>
  <hr>
</div>

<div style="padding-left: 100px; width: 600px; height: 500px;">
  <canvas id="myChart"></canvas>
</div>

chart.js

来源：https://stackoverflow.com/questions/76845015/unable-to-loop-through-the-data-to-print-charts-using-charts-js-in-html-javascri

1条答案

按热度按时间

kokeuurv1#

您的HTML无效。你的身体外面有divs。
不能在同一画布中使用新图表

const container = document.getElementById('chartContainer')
const labels = ['P1', 'P2', 'P3', 'P4', 'P5', 'P6'];

const itemData = [
  [12, 13, 14, 15, 16, 17],
  [19, 20, 21, 22, 23, 24],
  [3, 4, 5, 6, 7, 8],
  [5, 6, 7, 8, 9, 10],
  [10, 11, 12, 13.14, 15],
  [27, 28, 29, 30, 31, 32]
];

const text = ['t1', 't2', 't3', 't4', 't5', 't6'];
// create a default config
const config = {
  type: 'bar',
  options: {
    plugins: {
      legend: {
        display: false
      },
      title: {
        display: true,
      }
    }
  }
};

for (let i = 0; i < itemData.length; i++) {
  config.data = { // change this chart's config
    labels: labels,
    datasets: [{
      data: itemData[i],
      backgroundColor: 'green'
    }]
  };

  config.options.plugins.title.text = text[i]; // change this chart's title
  
  const canvas = document.createElement('canvas'); // create a new canvas
  container.appendChild(canvas); // and append it
  const chart = new Chart(canvas, config);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.3.2/chart.umd.min.js" integrity="sha512-ziISJqd7FOx3QNvnXiFWAfgSKqte9jMjzhrCnc7Gxpxfxjb5FdrBFg673DloeFEH6VLmTeo86yu5y/xJm38cBg==" crossorigin="anonymous" referrerpolicy="no-referrer">
</script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
<div class="container">
  <br>
  <p><a href="/" class="btn btn-secondary btn">Back to Charts & Analysis</a></p>

  <h4>Feature-wise Analysis</h4>
  <hr>
</div>

<div id="chartContainer" style="padding-left: 100px; width: 600px; height: 500px;">

</div>

赞(0）回复(0）举报 2023-10-18

我来回答

无法在html/JavaScript中使用charts.js循环数据以打印图表

1条答案

相关问题

热门标签

最新问答