Javascript 新建Chart.js Chart onclick

我正试图在一个新的web项目中充分利用Chart.js。我对大部分内容使用了选项卡式结构。我的图表在第三页，共四页

目前，图表正在绘制/构建负载。单击#chartTrigger（选项卡三）绘制新图表时，我如何做到这一点

有可能限制动画的数量吗？如果用户单击第三个选项卡，然后切换到第四个选项卡一段时间，然后决定返回第三个选项卡，我们可以停止再次显示动画吗

以下是我的现场演示：

身体{
字体系列：无衬线；
}
div.tab按钮{
边界：无；
大纲：无；
光标：指针；
填充物：0.6em 1em；
弹性基准：12%；
颜色：#34495E；
字母间距：1px；
文本转换：大写；
字号：0.9em；
背景色：#BDC3C7；
}
div.tab按钮.active{
背景色：#34495E；
颜色：#fff；
}
.tabcontent{
显示：无；
高度：300px；
宽度：50%；
颜色：#fff；
填充：35px；
}
#塔伯恩{
背景色：#E74C3C；
}
#塔布二{
背景色：#3498DB；
}
#塔布三{
文本对齐：居中；
}
#塔布福{
背景色：#2ECC71；
}
表一
表二
表三
表四
单击选项卡三查看图表
//用于在选项卡之间切换的功能
函数openTab（evt，tabName）{
var i，tabcontent，tablinks；
tabcontent=document.getElementsByClassName（“tabcontent”）；
对于（i=0；i

您应该将图表代码移动到

openTab

中，并使用全局变量作为标志，查看图表是否加载过一次，然后不要再加载。请参见下面的或演示

//在选项卡之间切换的函数
var isLoaded=false；
函数openTab（evt，tabName）{
var i，tabcontent，tablinks；
tabcontent=document.getElementsByClassName（“tabcontent”）；
对于（i=0；i
正文{
字体系列：无衬线；
}
div.tab按钮{
边界：无；
大纲：无；
光标：指针；
边界半径：1px；
填充物：0.6em 1em；
弹性基准：12%；
颜色：#34495E；
字母间距：1px；
文本转换：大写；
字号：0.9em；
背景色：#BDC3C7；
}
div.tab按钮.active{
背景色：#34495E；
颜色：#fff；
}
.tabcontent{
显示：无；
高度：300px；
宽度：50%；
颜色：#fff；
填充：35px；
}
#塔伯恩{
背景色：#E74C3C；
}
#塔布二{
背景色：#3498DB；
}
#塔布三{
文本对齐：居中；
}
#塔布福{
背景色：#2ECC71；
}

表一
表二
表三
表四
单击选项卡三查看图表
如果答案适合您，请务必将其标记为正确答案。
<style>
body {
  font-family:sans-serif;
}

div.tab button {
   border: none;
   outline: none;
   cursor: pointer;
   padding: 0.6em 1em;
   flex-basis: 12%;
   color: #34495E;
    letter-spacing: 1px;
   text-transform: capitalize;
    font-size: 0.9em;
    background-color: #BDC3C7;
}
div.tab button.active {
    background-color: #34495E;
    color:#fff;
}

.tabcontent {
  display: none;
  height:300px;
  width:50%;
  color:#fff;
  padding:35px;
}

#tabOne {
  background-color:#E74C3C;
}
#tabTwo {
  background-color:#3498DB;
}

#tabThree {
  text-align:center;
}

#tabFour {
  background-color:#2ECC71;
}


</style>

<div class="tab">
            <button id="defaultOpen" class="tablinks" 
onclick="openTab(event, 'tabOne')">Tab One</button>
            <button class="tablinks" onclick="openTab(event, 
'tabTwo')">Tab Two</button>
            <button id="chartTrigger" class="tablinks" 
onclick="openTab(event, 'tabThree')">Tab Three</button>
            <button class="tablinks" onclick="openTab(event, 
'tabFour')">Tab Four</button>

        </div>
<div id="tabOne" class="tabcontent">
  Click Tab Three for Chart
</div>
<div id="tabTwo" class="tabcontent">

</div>
<div id="tabThree" class="tabcontent">
  <canvas id="test-chart" height="500"></canvas>
</div>
<div id="tabFour" class="tabcontent">

</div>
<script>

// function to switch between tabs

function openTab(evt, tabName) {

  var i, tabcontent, tablinks;

  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }

  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", 
"");
  }

  document.getElementById(tabName).style.display = "block";
  evt.currentTarget.className += " active";
 }

document.getElementById("defaultOpen").click();

// Working Chart.js

var ctx = document.getElementById("test-chart").getContext('2d');
    var newTestChart = new Chart(ctx, {
      type: 'line',
      data: {
        labels: ["10/21", "10/22", "10/23", "10/24", "10/25", "10/26", 
"10/27", "10/28", "10/29", "10/30", "10/31", "11/01", "11/02", "11/03", 
"11/04"],
        datasets: [{
          data: [150, 550, 500, 880, 200, 100, 102, 102, 99, 105, 100, 
 103, 100, 102, 100],
          backgroundColor: ['rgba(77, 112, 144, 0.4)', ],
          borderColor: ['rgba(77, 112, 144,1)', ],
          borderWidth: 2
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        defaultFontFamily: "'Titillium Web'",
        defaultFontSize: 16,
        scales: {
          yAxes: [{
            ticks: {
              beginAtZero: true
            }
          }]
        },
      }
    });



// What I'd like to see happen...

var $chartTrigger = document.getElementById("chartTrigger");

$chartTrigger.onclick(newChart);

</script>