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

我使用以下代码在我的页面上显示图形：

<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>

变量lineChartData={
标签：[$chartmonths]，
数据集：[{
填充颜色：“rgba（2200,0）”，
strokeColor:“rgba（142250,0,1）”，
pointColor:“rgba（142250,0,1）”，
数据：[$chartwinrate]
}, {
fillColor:“rgba（151187205,0）”，
strokeColor:“rgba（0191255,1）”，
点颜色：“rgba（0191255,1）”，
数据：[$chartroi]
}]
}
Chart.defaults.global.animationSteps=100；
Chart.defaults.global.tooltipYPadding=16；
Chart.defaults.global.tooltipCornerRadius=0；
Chart.defaults.global.tooltipTitleFontStyle=“正常”；
Chart.defaults.global.tooltipFillColor=“rgba（0160,0,0.8）”；
Chart.defaults.global.animationEasing=“easeOutBounce”；
Chart.defaults.global.responsive=true；
Chart.defaults.global.scaleLineColor=“黑色”；
Chart.defaults.global.scaleFontSize=16；
var ctx=document.getElementById（“画布”）.getContext（“2d”）；
var LineChartDemo=新图表（ctx）.Line（lineChartData{
点半径：8，
贝塞尔曲线：对，
scaleShowVerticalLines：没错，
scaleGridLineColor：“白色”
});

它可以工作，但我想显示另一个图形，我尝试使用相同的代码，但添加了容器ID并更改了画布ID，但似乎不起作用：

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

---

显示第一个图形后，如何在一个页面上多次运行此操作？

您还必须更改画布元素的ID

然后您可以更改这一行

document.getElementById（'second-canvas'）

理想情况下，您应该封装画布创建代码，以便它接收元素的ID