javascript - 如何在一页上运行 javascript/Canvas 脚本两次？

Question

我正在使用以下代码在我的页面上显示图表:

<div class="container">
  <div>
    <canvas id="canvas"></canvas>
  </div>
</div>

<script>
var lineChartData = {
    labels: [$chartmonths],
    datasets: [{
        fillColor: "rgba(220,220,220,0)",
        strokeColor: "rgba(142,250,0,1)",
        pointColor: "rgba(142,250,0,1)",
        data: [$chartwinrate]
    }, {
        fillColor: "rgba(151,187,205,0)",
        strokeColor: "rgba(0,191,255,1)",
        pointColor: "rgba(0,191,255,1)",
        data: [$chartroi]
    }]

}

Chart.defaults.global.animationSteps = 100;
Chart.defaults.global.tooltipYPadding = 16;
Chart.defaults.global.tooltipCornerRadius = 0;
Chart.defaults.global.tooltipTitleFontStyle = "normal";
Chart.defaults.global.tooltipFillColor = "rgba(0,160,0,0.8)";
Chart.defaults.global.animationEasing = "easeOutBounce";
Chart.defaults.global.responsive = true;
Chart.defaults.global.scaleLineColor = "black";
Chart.defaults.global.scaleFontSize = 16;

var ctx = document.getElementById("canvas").getContext("2d");
var LineChartDemo = new Chart(ctx).Line(lineChartData, {
    pointDotRadius: 8,
    bezierCurve: true,
    scaleShowVerticalLines: true,
    scaleGridLineColor: "white"
});

</script>
<script src="js/Chart.min.js"></script>

它有效，但我想显示另一个图表，我尝试使用相同的代码但添加容器 ID 并更改 Canvas ID 但它似乎不起作用:

   <div class="container" id="second">
      <div>
        <canvas id="canvas"></canvas>
      </div>
    </div>

仅显示第一个图表，如何在一个页面上多次运行此图表？

Answer 1

您也必须更改 Canvas 元素的 ID <canvas id="second-canvas"></canvas>

然后你可以改变这一行 document.getElementById('second-canvas')理想情况下，您将封装 Canvas 创建代码，以便它接收元素的 ID。