Question

我有一个图表，它在同一个画布上重复渲染。画布不会重新创建。我正在使用Chart.js进行渲染？我发现图表每次渲染时都会调整大小。我有两个问题。

图表可以停止调整大小吗？
在下一个图表呈现之前是否可以清除画布？

到目前为止我的代码：

JS：

HTML：

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});

如果我重复了此论坛上已经提出的问题，我道歉。

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});

图表每次渲染时都会调整大小

2 个答案: