时间戳

首页 > 解决方案 > 在同一个网页中创建多个chart.js？

javascript - 在同一个网页中创建多个chart.js？

问题描述

所以我想出了如何在同一页面上绘制多个图表，但我想知道是否有比为每个 div 指定名称更好的方法来做到这一点？

代码片段：

  <body>
<div style="width:1080px;margin:0 auto;">
<div style="width:80%">
  <canvas id="canvas"></canvas>
</div>
<div  style="width:80%">
  <canvas id="canvas2"></canvas>
</div>
</div>


      var ctx = document.getElementById("canvas").getContext("2d");
  new Chart.Scatter (ctx, {
    data: build_data_set(1),
    options: set_options(1)
  });

  var ctx2 = document.getElementById("canvas2").getContext("2d");
  new Chart.Scatter(ctx2, {
    data: build_data_set(0),
    options: set_options(0)
  });

因此，例如，如果我需要绘制 30 个图表，我需要指定 30 个 div 吗？(canvas,canvas2,canvas3...,canvas30) 或者是否有更好的方法可以使用 for 循环来做到这一点？

经过大量的挖掘，我成功了。这是代码：

      function create_chart(set_data, options, canvas){
    var ctx=document.getElementById(canvas).getContext('2d');
     new Chart.Line(ctx, {data:set_data, options:options});

  }
  var in_canvas = document.getElementById('graph-container');
  for (k=0; k<param.length; k++){
    var newDiv = document.createElement('div');
    in_canvas.appendChild(newDiv);
    var newCan = document.createElement('canvas');
    newDiv.appendChild(newCan);
    newCan.id = "canvas"+[k];
    canv="canvas"+[k];
    var data_test=build_data_set(k)
    create_chart(build_data_set(k),set_options(k),canv);


}

标签： javascripthtmlchart.js

解决方案

推荐阅读