多個圖表互相渲染

我有一些圖表數據，我通過AJAX調用加載並顯示支持工具提示的修改的Chart.js。對於第一次調用它很好，但是當我通過更改日期範圍進行後續調用時，它會在舊圖表數據之上繪製新圖表數據。我已將圖表刷新代碼放入窗口大小調整事件中，以便它可以響應。但是，這實際上可能是導致問題的原因。這裏是我的代碼：多個圖表互相渲染

var BreakDowns = [ 
    'Daily', 
    'Weekly', 
    'Monthly', 
    'Quarterly', 
    'Yearly' 
]; 

var BreakDown = ko.observable(BreakDowns[0]); 
BreakDown.subscribe(function (newValue) { 
    switch (newValue) { 
     case 'Daily': 
      EndDate(StartDate()); 
      break; 
     case 'Weekly': 
      EndDate(moment(StartDate()).add('d', 7).format('MM/DD/YYYY')); 
      break; 
     case 'Monthly': 
      EndDate(moment(StartDate()).add('M', 1).format('MM/DD/YYYY')); 
      break; 
     case 'Quarterly': 
      EndDate(moment(StartDate()).add('M', 3).format('MM/DD/YYYY')); 
      break; 
     case 'Yearly': 
      EndDate(moment(StartDate()).add('y', 1).format('MM/DD/YYYY')); 
      break; 
    } 
    GetChartData(); 
}); 

var date = new Date(); 

var StartDate = ko.observable(moment(date).format('MM/DD/YYYY')); 
var EndDate = ko.observable(moment(date).format('MM/DD/YYYY')); 

var Form = ko.validatedObservable({ 
    StartDate: StartDate.extend({ isDate: true }), 
    EndDate: EndDate.extend({ isDate: true }) 
});  

StartDate.subscribe(function (newValue) { 
    GetChartData(); 
}); 

EndDate.subscribe(function (newValue) { 
    GetChartData(); 
}); 


var chart = {}; 

var GetChartData = function() { 
    if (Form.isValid()) { 
     $.ajax({ 
      url: serviceUri + 'api/Document/ChartData/?breakdown=' + BreakDown().toLowerCase() + '&startDate=' + StartDate() + '&endDate=' + EndDate(), 
      method: 'GET', 
      dataType: 'json', 
      success: function (d) { 
       var chartData = { 
        labels: d.AxisLabels, 
        datasets: [ 
         { 
          fillColor: "rgba(220,220,220,0.5)", 
          strokeColor: "rgba(220,220,220,1)", 
          pointColor: "rgba(220,220,220,1)", 
          pointStrokeColor: "#fff", 
          data: d.DataSets[0] 
         } 
        ] 
       }; 

       var max = Math.max.apply(Math, d.DataSets[0]); 
       var steps = 10; 

       var c = $('#summary'); 
       var ctx = c.get(0).getContext("2d"); 
       var container = c.parent(); 

       $(window).resize(respondCanvas); 

       function respondCanvas() { 
        var $container = $(container); 
        if ($container.width() >= 900) 
         c.attr('width', $container.width()); 
        else 
         c.attr('width', 900); 

        if ($container.height() >= 400) 
         c.attr('height', $container.height());     
        else 
         c.attr('height', 400); 

        ctx.width = ctx.width; 

        //Call a function to redraw other content (texts, images etc) 
        chart = new Chart(ctx).Bar(chartData, { 
         scaleOverride: true, 
         scaleSteps: steps, 
         scaleStepWidth: Math.ceil(max/steps), 
         scaleStartValue: 0, 
         annotateDisplay: true 
        }); 
       } 

       respondCanvas(); 
      } 
     }); 
    } 
}

下面是什麼樣的結果圖表看起來像一個形象： Mangled chart

我怎麼chart.js之不畫了以前的數據，繪製出新的圖表？

來源

2014-05-02 Cameron Tinker

您需要將'$（window）.resize（respondCanvas）;'移到您的ajax成功回調之外。使用目前的方法，您多次調用resize事件，這可能會導致多個圖表呈現... – nemesv

'ctx.width = ctx.width'不會顯示100％清除畫布的可靠性（請參閱註釋[這個答案]（http://stackoverflow.com/a/2142549/3490792））。嘗試使用'ctx.clearRect（0，0，ctx.width，ctx.height）'代替。 – Charlie

更正，最後的評論應該說：嘗試使用'ctx.clearRect（0，0，ctx.canvas.width，ctx.canvas.height）'代替。 – Charlie

移動$(window).resize(respondCanvas)我的AJAX成功回調後，這裏是一個什麼我有一個工作的簡化版本：

var chartData = {}; 
var max = 0; 
var steps = 10; 

function respondCanvas() { 
    var c = $('#summary'); 
    var ctx = c.get(0).getContext("2d"); 
    var container = c.parent(); 

    var $container = $(container); 

    c.attr('width', $container.width()); //max width 

    c.attr('height', $container.height()); //max height     

    //Call a function to redraw other content (texts, images etc) 
    var chart = new Chart(ctx).Bar(chartData, { 
     scaleOverride: true, 
     scaleSteps: steps, 
     scaleStepWidth: Math.ceil(max/steps), 
     scaleStartValue: 0, 
     annotateDisplay: true 
    }); 
} 

var GetChartData = function() { 
    $.ajax({ 
     url: serviceUri, 
     method: 'GET', 
     dataType: 'json', 
     success: function (d) { 
      chartData = { 
       labels: d.AxisLabels, 
       datasets: [ 
        { 
         fillColor: "rgba(220,220,220,0.5)", 
         strokeColor: "rgba(220,220,220,1)", 
         pointColor: "rgba(220,220,220,1)", 
         pointStrokeColor: "#fff", 
         data: d.DataSets[0] 
        } 
       ] 
      }; 

      max = Math.max.apply(Math, d.DataSets[0]); 
      steps = 10; 

      respondCanvas(); 
     } 
    }); 
}; 

$(document).ready(function() { 
    $(window).resize(respondCanvas); 

    GetChartData(); 
});

注意，如果要插入更新之間有一個小的延遲，你可以使用超時：

$(document).ready(function() { 
    $(window).resize(setTimeout(respondCanvas, 500)); 

    GetChartData(); 
});

來源

2014-05-05 19:04:19

多個圖表互相渲染

回答

相關問題