ChartJS内存泄漏

Question

我正在尝试实例化一个新图表，但是当我更改值时，内存会出现不可思议的峰值。

我正在使用Activity Monitor来检查Firefox的CPU和网络使用情况。

以下是我的chart.js文件：

var ctx = document.getElementById("myChart");
ctx.height = 230;
ctx = ctx.getContext('2d');


var gradient1 = ctx.createLinearGradient(0, 0, 0, 400);
gradient1.addColorStop(0, 'rgba(40, 145, 187, 1)');
gradient1.addColorStop(1, 'rgba(40, 145, 187, 1)');

var gradient2 = ctx.createLinearGradient(0, 0, 0, 400);
gradient2.addColorStop(0, 'rgba(0, 73, 119, 1)');
gradient2.addColorStop(1, 'rgba(0, 73, 119, 1)');

var gradient3 = ctx.createLinearGradient(0, 0, 0, 400);
gradient3.addColorStop(0, 'rgba(255, 206, 85, 1)');
gradient3.addColorStop(1, 'rgba(255, 206, 85, 1)');

var dataUS = ['50000', '50880', '51775', '52687','53614', '54558'];
var dataCapital = ['50000', '51150', '52326', '53530', '54761','56021'];
var dataGramercy = ['50000', '54125', '58590', '63424', '68656','74321']

var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ["1", "2", "3", "4", "5", "6"],
        datasets: [
            {
                data: dataUS,
                backgroundColor: gradient3,
                pointBackgroundColor: '#fff',
                pointRadius : 0,
                pointBorderWidth: 4,
                pointBorderColor: 'rgba(0,0,0,0.2)',
                label: 'US Treasury Bond'
            },
            {
                data: dataCapital,
                backgroundColor: gradient2,
                pointBackgroundColor: '#fff',
                pointRadius : 0,
                pointBorderWidth: 4,
                pointBorderColor: 'rgba(0,0,0,0.2)',
                label: 'Capital One 360 CD'
            },
            {
                data: dataGramercy,
                backgroundColor: gradient1,
                pointBackgroundColor: '#fff',
                pointRadius : 0,
                pointBorderWidth: 4,
                pointBorderColor: 'rgba(0,0,0,0.2)',
                label: 'Gramercy District Phase 1A'
            }
        ]
    },
    options: {
        // String - Template string for single tooltips
        tooltips: {
            callbacks: {
                title: function(tooltipItem, data) {
                    var datasetLabel = data.datasets[tooltipItem[0].datasetIndex].label || 'Other';
                    return datasetLabel;
                  },
                label: function(tooltipItem, data) {
                    var label = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
                    return "$" + formatValue(Math.round(label));
                  }
            }
          },
        responsive: true,
        legend: {
            position: 'bottom',
            display: true
        },
        scales: {
            yAxes: [{
                ticks: {
                    type: 'logarithmic',
                    min: 50000,
                    max: 80000,
                    maxTicksLimit: 5,
                    userCallback: function(value, index, values) {
                        // Convert the number to a string and splite the string every 3 charaters from the end
                        value = value.toString();
                        value = value.split(/(?=(?:...)*$)/);
                        value = value.slice(0, -1);

                        // Convert the array to a string and format the output
                        value = value.join('.');
                        return '$' + value + 'k';
                    }
                }
            }],
            xAxes: [{
                ticks: {
                    type: 'logarithmic',
                    min: 0,
                    max: 5,
                    maxTicksLimit: 6,
                    userCallback: function(value, index, values) {

                        // Convert the array to a string and format the output
                        //value = value.join('.');
                        if (value == 1) return 'Invest';
                        return 'Year ' + (value-1);
                    }
                }
            }]
        }
    }
});

calculateTotal(50000);

document.getElementById('amount').onchange = function(){
    value = normalizeValue(this.value);
    this.value = formatValue(this.value)
    doGraph(parseInt(value));
}

function doGraph(amount) {
    calculateInv(amount);

    myChart.data.datasets[1].data = dataCapital;
    myChart.data.datasets[2].data = dataGramercy;
     myChart.data.datasets[0].data = dataUS;


    //show result
    calculateTotal(amount);

    var endValue = normalizeValue(document.getElementById('result').innerHTML);
    endValue = parseInt(endValue.replace('$', ''));

    if(endValue + 10000 > myChart.config.options.scales.yAxes[0].ticks.max) {
        //console.log("first");
        while(endValue > myChart.config.options.scales.yAxes[0].ticks.max) {
            myChart.config.options.scales.yAxes[0].ticks.max = myChart.config.options.scales.yAxes[0].ticks.max + 10000;
        }
        //console.log(myChart.config.options.scales.yAxes[0].ticks.max);
    }
    else {
        //console.log("second");
        while(endValue + 10000 < myChart.config.options.scales.yAxes[0].ticks.max) {
            myChart.config.options.scales.yAxes[0].ticks.max = myChart.config.options.scales.yAxes[0].ticks.max - 10000;
            /*if(myChart.config.options.scales.yAxes[0].ticks.max == 90000) {
                break;
            }*/
        }
    }

    var startValue = normalizeValue(document.getElementById("amount").value);
    startValue = parseInt(startValue) || 0;
    myChart.config.options.scales.yAxes[0].ticks.min = startValue;
    myChart.update();
}

function calculateInv(investment) {
    for (i = 0 ; i<dataUS.length ; i++){
        dataUS[i] = investment;
        dataCapital[i] = investment;
        dataGramercy[i] = investment;
    }
    for (i=1 ; i< dataUS.length ; i++) {
        for (j=0; j<i ; j++) dataUS[i] = dataUS[i] + dataUS[i] * (0.0176);
    }
    for (i=1 ; i< dataCapital.length ; i++) {
        for (j=0; j<i ; j++) dataCapital[i] = dataCapital[i] + dataCapital[i] * (0.023);
    }
    for (i=1 ; i< dataGramercy.length ; i++) {
        for (j=0; j<i ; j++) dataGramercy[i] = dataGramercy[i] + dataGramercy[i] * (0.0825);
    }

}

function calculateTotal(amount) {
    amount = parseInt(amount) || 0;

    /*if (amount < 50000) {
        amount = 50000;
        document.getElementById('amount').value = formatValue(amount);
    }*/


    for(var i = 1; i <= 5; i++) {
        amount = amount * 1.0825;
    }

    amount = Math.round(amount);
    document.getElementById('result').innerHTML = formatValue(amount);
    handleChange();
}

// Add $ symbol
function handleChange() {
   var myValue = document.getElementById("result").innerHTML;
   if (myValue.indexOf("$") != 0)
   {
      myValue = "$" + myValue;
   }

   document.getElementById("result").innerHTML = myValue;
}

function formatValue(x) {
    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
}

function normalizeValue(x) {
    return x.replace(/,/g,'');
}

我已经阅读了有关使用onDestroy（）方法的解决方案，但我不确定它是否适用于此方案或如何正确执行。以下是我完整实施的链接。请让我知道导致此内存泄漏的原因！

var ctx = document.getElementById("myChart");
ctx.height = 230;
ctx = ctx.getContext('2d');


var gradient1 = ctx.createLinearGradient(0, 0, 0, 400);
gradient1.addColorStop(0, 'rgba(40, 145, 187, 1)');
gradient1.addColorStop(1, 'rgba(40, 145, 187, 1)');

var gradient2 = ctx.createLinearGradient(0, 0, 0, 400);
gradient2.addColorStop(0, 'rgba(0, 73, 119, 1)');
gradient2.addColorStop(1, 'rgba(0, 73, 119, 1)');

var gradient3 = ctx.createLinearGradient(0, 0, 0, 400);
gradient3.addColorStop(0, 'rgba(255, 206, 85, 1)');
gradient3.addColorStop(1, 'rgba(255, 206, 85, 1)');

var dataUS = ['50000', '50880', '51775', '52687','53614', '54558'];
var dataCapital = ['50000', '51150', '52326', '53530', '54761','56021'];
var dataGramercy = ['50000', '54125', '58590', '63424', '68656','74321']

var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ["1", "2", "3", "4", "5", "6"],
        datasets: [
            {
                data: dataUS,
                backgroundColor: gradient3,
                pointBackgroundColor: '#fff',
                pointRadius : 0,
                pointBorderWidth: 4,
                pointBorderColor: 'rgba(0,0,0,0.2)',
                label: 'US Treasury Bond'
            },
            {
                data: dataCapital,
                backgroundColor: gradient2,
                pointBackgroundColor: '#fff',
                pointRadius : 0,
                pointBorderWidth: 4,
                pointBorderColor: 'rgba(0,0,0,0.2)',
                label: 'Capital One 360 CD'
            },
            {
                data: dataGramercy,
                backgroundColor: gradient1,
                pointBackgroundColor: '#fff',
                pointRadius : 0,
                pointBorderWidth: 4,
                pointBorderColor: 'rgba(0,0,0,0.2)',
                label: 'Gramercy District Phase 1A'
            }
        ]
    },
    options: {
        // String - Template string for single tooltips
        tooltips: {
            callbacks: {
                title: function(tooltipItem, data) {
                    var datasetLabel = data.datasets[tooltipItem[0].datasetIndex].label || 'Other';
                    return datasetLabel;
                  },
                label: function(tooltipItem, data) {
                    var label = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
                    return "$" + formatValue(Math.round(label));
                  }
            }
          },
        responsive: true,
        legend: {
            position: 'bottom',
            display: true
        },
        scales: {
            yAxes: [{
                ticks: {
                    type: 'logarithmic',
                    min: 50000,
                    max: 80000,
                    maxTicksLimit: 5,
                    userCallback: function(value, index, values) {
                        // Convert the number to a string and splite the string every 3 charaters from the end
                        value = value.toString();
                        value = value.split(/(?=(?:...)*$)/);
                        value = value.slice(0, -1);

                        // Convert the array to a string and format the output
                        value = value.join('.');
                        return '$' + value + 'k';
                    }
                }
            }],
            xAxes: [{
                ticks: {
                    type: 'logarithmic',
                    min: 0,
                    max: 5,
                    maxTicksLimit: 6,
                    userCallback: function(value, index, values) {

                        // Convert the array to a string and format the output
                        //value = value.join('.');
                        if (value == 1) return 'Invest';
                        return 'Year ' + (value-1);
                    }
                }
            }]
        }
    }
});

calculateTotal(50000);

document.getElementById('amount').onchange = function(){
    value = normalizeValue(this.value);
    this.value = formatValue(this.value)
    doGraph(parseInt(value));
}

function doGraph(amount) {
    calculateInv(amount);

    myChart.data.datasets[1].data = dataCapital;
    myChart.data.datasets[2].data = dataGramercy;
     myChart.data.datasets[0].data = dataUS;


    //show result
    calculateTotal(amount);

    var endValue = normalizeValue(document.getElementById('result').innerHTML);
    endValue = parseInt(endValue.replace('$', ''));

    if(endValue + 10000 > myChart.config.options.scales.yAxes[0].ticks.max) {
        //console.log("first");
        while(endValue > myChart.config.options.scales.yAxes[0].ticks.max) {
            myChart.config.options.scales.yAxes[0].ticks.max = myChart.config.options.scales.yAxes[0].ticks.max + 10000;
        }
        //console.log(myChart.config.options.scales.yAxes[0].ticks.max);
    }
    else {
        //console.log("second");
        while(endValue + 10000 < myChart.config.options.scales.yAxes[0].ticks.max) {
            myChart.config.options.scales.yAxes[0].ticks.max = myChart.config.options.scales.yAxes[0].ticks.max - 10000;
            /*if(myChart.config.options.scales.yAxes[0].ticks.max == 90000) {
                break;
            }*/
        }
    }

    var startValue = normalizeValue(document.getElementById("amount").value);
    startValue = parseInt(startValue) || 0;
    myChart.config.options.scales.yAxes[0].ticks.min = startValue;
    myChart.update();
}

function calculateInv(investment) {
    for (i = 0 ; i<dataUS.length ; i++){
        dataUS[i] = investment;
        dataCapital[i] = investment;
        dataGramercy[i] = investment;
    }
    for (i=1 ; i< dataUS.length ; i++) {
        for (j=0; j<i ; j++) dataUS[i] = dataUS[i] + dataUS[i] * (0.0176);
    }
    for (i=1 ; i< dataCapital.length ; i++) {
        for (j=0; j<i ; j++) dataCapital[i] = dataCapital[i] + dataCapital[i] * (0.023);
    }
    for (i=1 ; i< dataGramercy.length ; i++) {
        for (j=0; j<i ; j++) dataGramercy[i] = dataGramercy[i] + dataGramercy[i] * (0.0825);
    }

}

function calculateTotal(amount) {
    amount = parseInt(amount) || 0;

    /*if (amount < 50000) {
        amount = 50000;
        document.getElementById('amount').value = formatValue(amount);
    }*/


    for(var i = 1; i <= 5; i++) {
        amount = amount * 1.0825;
    }

    amount = Math.round(amount);
    document.getElementById('result').innerHTML = formatValue(amount);
    handleChange();
}

// Add $ symbol
function handleChange() {
   var myValue = document.getElementById("result").innerHTML;
   if (myValue.indexOf("$") != 0)
   {
      myValue = "$" + myValue;
   }

   document.getElementById("result").innerHTML = myValue;
}

function formatValue(x) {
    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
}

function normalizeValue(x) {
    return x.replace(/,/g,'');
}

.graph {
         margin-top: 16px;
         }
        
          .your {
          line-height: 32px;
          }
          
        .form-inline {
        display: -webkit-box;
          display: -webkit-flex;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-pack: center;
          -webkit-justify-content: center;
          -ms-flex-pack: center;
          justify-content: center;
          -webkit-flex-wrap: wrap;
          -ms-flex-wrap: wrap;
          flex-wrap: wrap;
          -webkit-box-align: center;
          -webkit-align-items: center;
          -ms-flex-align: center;
          align-items: center;
          -webkit-align-content: center;
          -ms-flex-line-pack: center;
          align-content: center;
          margin-bottom: 5px;
        }
          
        #chart .chart-body .inputs {
            padding: 0 0 26px 0;
        }
          
        
        #chart .chart-body .inputs * {
            padding: 0 12px;
        }
          
          
        #chart .chart-body #amount {
            width: 100px;
            border-top-left-radius: 2px;
            border-bottom-left-radius: 2px;
        }  
          
        #chart .chart-body #currency {
            width: 60px;
            height: 40px;
            padding-top: 10px;
            border-top-right-radius: 2px;
            border-bottom-right-radius: 2px;
        }
          
        #chart .chart-body input, #chart .chart-body select {
            height: 40px;
            border-radius: 0px;  
        }
          
          
        .custom-select {
            display: inline-block;
            margin-left: -2px;
            margin-right: 8px;
            line-height: 1.25;
            color: #2d2f32;
             padding: .5rem .75rem;
            background-color: #f4f4f4;
            vertical-align: middle;
            background-size: 8px 10px;
            border: 1px solid rgba(0,0,0,.15);
            border-radius: .25rem;
        }
          
          
        .form-control {
            display: block;
            width: 100px;
            padding: .5rem .75rem;
            margin-left: 8px;
            margin-right: 8px;
            font-size: 1rem;
            line-height: 1.25;
            color: #2d2f32;
            background-color: #fff;
            background-image: none;
            -webkit-background-clip: padding-box;
            background-clip: padding-box;
            border: 1px solid rgba(0,0,0,.15);
            border-radius: .25rem;
            -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
            transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
            -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
            transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
            transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
        }  
          
        
        
         
          
        #chart .chart-body #result {
          font-weight: bold;
            border-bottom: 1px dashed #2891BB;
            background: transparent;
            padding: 0;
            margin-left: -8px;
        }
        
        #result {
        color: #2891BB;
        margin-left: 8px;
        }
        
        .inputs {
        
          margin: 0 auto;
          
        }  
        
        @media (max-width: 767px) {  
          
          .inputs {
          margin: 0 auto;
            width: 300px;  
        }  
          }
          
        @media (max-width: 479px) {  
          
          .inputs {
          margin: 0 auto;
          width: 240px;
        } 
          
          .your { display: block; width: 200px; text-align: center;}
        
        }
          
          #result {
            color: #2891BB;
         
          }

<!DOCTYPE html>
<!-- Last Published: Fri Jan 26 2018 19:51:31 GMT+0000 (UTC) -->
<head>
    <title>Invest</title>
    <link href="https://uploads-ssl.webflow.com/59f120556e24550001e357ed/css/22ai.775aa6e3a.min.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" type="text/css" href="styles.css">

    <script src="https://design.life.ai/js/investmentChart.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.min.js"></script>
</head>

<body>
    <div class="section-13">
        <div class="wrapper">
            <div class="div-block-13">
                <h2 class="h2">Calculate your investment</h2>
                <div class="investment">
                    <div class="fixed-income">
                        <div class="row-9 w-row">
                            <div class="column-41 w-col w-col-3">
                                <div class="text-block-12">Ann. Intrest Rate</div>
                                <div class="text-block-13">5% - 8.25%</div>
                            </div>
                            <div class="column-40 w-col w-col-3">
                                <div class="text-block-12">Term</div>
                                <div class="text-block-13">2,3,4 or 5 years</div>
                            </div>
                            <div class="column-39 w-col w-col-3">
                                <div class="text-block-12">Investment Type</div>
                                <div class="text-block-13">Fixed Income</div>
                            </div>
                            <div class="column-38 w-col w-col-3">
                                <div class="text-block-12">Method</div>
                                <div class="text-block-13">IRA or Direct</div>
                            </div>
                        </div>
                        <div class="html-embed-2 w-embed">
                            <div class="inputs">
                                <div class="form-inline">
                                    <span class="your">A 5 yr. investment of </span><input type="text" value="50,000" id="amount" class="form-control">
                                    <span class="custom-select" id="currency">
        USD
      </span>
                                    <span id="grow-label"> at 8.25% will grow to </span><span id="result"></span>
                                </div>
                            </div>

                            <div class="graph">
                                <canvas id="myChart" width="400" height="427"> </canvas>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js" type="text/javascript"></script>
    <script src="https://uploads-ssl.webflow.com/59f120556e24550001e357ed/js/22ai.e0bf30a6c.js" type="text/javascript"></script>
    <!--[if lte IE 9]><script src="//cdnjs.cloudflare.com/ajax/libs/placeholders/3.0.2/placeholders.min.js"></script><![endif]-->
    <script src="https://design.life.ai/js/investmentChart.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.min.js"></script>
</body>

</html>