时间戳

首页 > 解决方案 > 在 HTML 页面上显示多个图表？

javascript - 在 HTML 页面上显示多个图表？

问题描述

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

我知道只有在用户发送数据后我需要多少图表，所以我不能在 HTML 文件中编写不同的 canvas-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>

javascript

var piechart = $("#pie-chartcanvas-1");
     var data1 = {
     labels: itemsArr,
     datasets: [
     {
      label: "Population (millions)",
      backgroundColor:
      ["#3e95cd", "#8e5ea2","#3cba9f","#e8c3b9","#c45850","#3cba9f"],
      data: mat[0]
       }
       ]
       };

     var chart = new Chart(piechart,{
     type:"pie",
     data : data1,
     options:{
       title: {
          display: true,
          text: namesArr[0]
     }

   }});

标签： javascripthtmlchart.js

解决方案

用户发送给您的数据是作为 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]
      }
    }
  });
}

推荐阅读