Javascript 在HTML页面显示多个图表？_Javascript_Html_Chart.js

Javascript 在HTML页面显示多个图表？

javascript html chart.js

Javascript 在HTML页面显示多个图表？,javascript,html,chart.js,Javascript,Html,Chart.js,我需要使用chart.js显示多个图表我知道只有在用户发送数据后我才需要多少图表，所以我不能在HTML文件中写入不同的画布id（我不知道我需要多少）所以我的问题是，如何在一开始就不知道的情况下显示大量图表？（每个图表在矩阵中都是不同的一行）我的代码： <HTML> <div class="chart-container"> <div class="pie-chart-container"> &l

我需要使用chart.js显示多个图表

我知道只有在用户发送数据后我才需要多少图表，所以我不能在HTML文件中写入不同的画布id（我不知道我需要多少）

所以我的问题是，如何在一开始就不知道的情况下显示大量图表？（每个图表在矩阵中都是不同的一行）

我的代码：

<HTML>
<div class="chart-container">
              <div class="pie-chart-container">
                <canvas id="pie-chartcanvas-1"></canvas>
            </div>
         </div>

     <!-- javascript -->
     <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>

用户发送给您的数据是data1对象吗？你总是需要饼图吗？如果是的话

function createChart(data, id) {
  addCanvas(id); // some id generated by you or sent by the user
  generateChart(data, id); // data from the user
}

function addCanvas(id) { // create the new canvas
  let canvas = document.createElement("canvas");
  canv.setAttribute("id", "canvasID");
  document.getElementsByClassName('pie-chart-container')[0].appendChild(canvas);
}   

function generateChart(data, id) { // initialize the new chart 
  let piechart = $("#" + id);
  let chart = new Chart(piechart,{
    type:"pie",
    data : data,
    options: {
      title: {
        display: true,
        text: namesArr[0]
      }
    }
  });
}

用户发送给您的数据是data1对象吗？你总是需要饼图吗？如果是的话

function createChart(data, id) {
  addCanvas(id); // some id generated by you or sent by the user
  generateChart(data, id); // data from the user
}

function addCanvas(id) { // create the new canvas
  let canvas = document.createElement("canvas");
  canv.setAttribute("id", "canvasID");
  document.getElementsByClassName('pie-chart-container')[0].appendChild(canvas);
}   

function generateChart(data, id) { // initialize the new chart 
  let piechart = $("#" + id);
  let chart = new Chart(piechart,{
    type:"pie",
    data : data,
    options: {
      title: {
        display: true,
        text: namesArr[0]
      }
    }
  });
}

您可以创建新的画布元素（或其他元素）并将其附加到文档中。您可以创建新的画布元素（或其他元素）并将其附加到文档中。