диаграмма изменяется каждый раз, когда она отображается

Question

У меня есть диаграмма, которая отображается в том же холсте многократно. Холст не воссоздается. Я использую Chart.js для рендеринга? Я нахожу, что диаграмма изменяется каждый раз, когда она отображается. У меня есть 2 вопроса.

1. Может ли график быть остановлен от изменения размера?
2. Можно ли очистить холст до отображения следующего графика?

код у меня до сих пор:

JS:

var productsLength = payerAccArr[index].ProductsUsed.length; 
    if (productsLength > 5){ 
    productsLength = 5 
    } 

    var colorArray = ["#F7464A","#46BFBD","#FDB45C","#949FB1","#4D5360"]; 
    var highlightArr=["#FF5A5E","#5AD3D1","#FFC870","#A8B3C5","#616774"]; 
    var doughnutData=[]; 
    for(indexer=0;indexer<productsLength;indexer++){ 
    var dataObj = { 
     value: payerAccArr[index].ProductsUsed[indexer].TotalCost, 
     color:colorArray[indexer], 
     highlight: highlightArr[indexer], 
     label: payerAccArr[index].ProductsUsed[indexer].ProductCode 
    }; 

    doughnutData.push(dataObj); 
    } 

    // window.onload = function(){ 
     var ctx = document.getElementById("chart-area").getContext("2d"); 
     ctx.canvas.width = 268; 
     ctx.canvas.height = 259; 
     window.myDoughnut = new Chart(ctx).Doughnut(doughnutData, {responsive : true, maintainAspectRatio: false}); 

HTML:

<div id="canvas-holder" class='hide'> 
       <span id='spend'>Month-To-Date Spend By Service</span> 
       <canvas id="chart-area" style='width: 268px; height:259px;'/> 

Прошу прощения, если я повторил вопрос, уже заданный на этом форуме.

Answer 1

Ну, чтобы ответить на Q # 2, просто используйте ctx.clearRect(0,0,<width>,<height>).

Answer 2

Я был в состоянии решить эту проблему, удалив responsive: true с сохранением только maintainAspectRatio: false. Мой код теперь выглядит следующим образом:

var productsLength = payerAccArr[index].ProductsUsed.length; 
    if (productsLength > 5){ 
    productsLength = 5 
    } 

    var colorArray = ["#F7464A","#46BFBD","#FDB45C","#949FB1","#4D5360"]; 
    var highlightArr=["#FF5A5E","#5AD3D1","#FFC870","#A8B3C5","#616774"]; 
    var doughnutData=[]; 
    for(indexer=0;indexer<productsLength;indexer++){ 
    var dataObj = { 
     value: payerAccArr[index].ProductsUsed[indexer].TotalCost, 
     color:colorArray[indexer], 
     highlight: highlightArr[indexer], 
     label: payerAccArr[index].ProductsUsed[indexer].ProductCode 
    }; 

    doughnutData.push(dataObj); 
    } 

    // window.onload = function(){ 
     var ctx = document.getElementById("chart-area").getContext("2d"); 
     ctx.canvas.width = 268; 
     ctx.canvas.height = 259; 
     window.myDoughnut = new Chart(ctx).Doughnut(doughnutData, {maintainAspectRatio: false});