Question

我在基于引导程序的页面中有一个图表，我试图在页面调整大小时调整它的大小，以跟踪响应式设计的变化。所以我有这段代码：

function redrawChart() {
    var w = $("#chart_container").width();
    var c = document.getElementById("chart_canvas");
    c.width = w;
    c.height = w/2;
    $("#chart_canvas").css("width", w);
    $("#chart_canvas").css("height", w/2);

    var chart_canvas = document.getElementById("chart_canvas").getContext("2d");
    var line_chart= new Chart(chart_canvas).Line(data, options);
};

redrawChart();

var resizeTimer; 

$(window).resize(function() {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(redrawChart, 250);
});

因此，在加载页面时调用一次redrawChart，然后调整每个页面的大小。

症状：加载页面时，只要未调整页面大小，一切都能正常运行。调整大小后，图表会闪烁，当鼠标悬停在图表上时会非常快速地调整大小。

这里有什么不妥？

Answer 1

在同一画布上重新创建图表之前，需要销毁图表。所以你可以这样编辑你的重绘：

 //declare outside so it can be resued and checked
 var line_chart;

function redrawChart() {
    //if we already have a chart destroy it then carry on as normal
    if(line_chart)
    {
            line_chart.destroy();
    }
    var w = $("#chart_container").width();
    var c = document.getElementById("canvas");
    c.width = w;
    c.height = w/2;
    $("#chart_canvas").css("width", w);
    $("#chart_canvas").css("height", w/2);

    var chart_canvas = document.getElementById("canvas").getContext("2d");
    line_chart= new Chart(chart_canvas).Bar(barChartData);
};

这是一个小提琴，所以你可以实际重新调整运行窗口的大小以使其正常工作http://fiddle.jshell.net/leighking2/4apqqjL0/

和你喜欢的片段

＆＃13;

var randomScalingFactor = function () {
    return Math.round(Math.random() * 100)
};

var barChartData = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [{
        fillColor: "rgba(220,220,220,0.5)",
        strokeColor: "rgba(220,220,220,0.8)",
        highlightFill: "rgba(220,220,220,0.75)",
        highlightStroke: "rgba(220,220,220,1)",
        data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
    }, {
        fillColor: "rgba(151,187,205,0.5)",
        strokeColor: "rgba(151,187,205,0.8)",
        highlightFill: "rgba(151,187,205,0.75)",
        highlightStroke: "rgba(151,187,205,1)",
        data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
    }, {
        fillColor: "rgba(15,18,20,0.5)",
        strokeColor: "rgba(15,18,20,0.8)",
        highlightFill: "rgba(15,18,20,0.75)",
        highlightStroke: "rgba(15,18,20,1)",
        data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
    }]

}


 var line_chart;

function redrawChart() {
    if(line_chart)
    {
            line_chart.destroy();
    }
    var w = $("#chart_container").width();
    var c = document.getElementById("canvas");
    c.width = w;
    c.height = w/2;
    $("#chart_canvas").css("width", w);
    $("#chart_canvas").css("height", w/2);

    var chart_canvas = document.getElementById("canvas").getContext("2d");
    line_chart= new Chart(chart_canvas).Bar(barChartData);
};

redrawChart();

var resizeTimer; 

$(window).resize(function() {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(redrawChart, 250);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.1/Chart.js"></script>
<div id="chart_container"style="width: 50%">
    <canvas id="canvas" height="450" width="600"></canvas>
</div>

＆＃13;

Answer 2

您需要销毁图表之前的数据。 Ajax请求的Bellow示例。如果你使用破坏，你应该使用画布的高度和宽度，否则你的图形大小会在每个响应中减少。

$("#search_date").on('change', function(){
 if(window.myBar!=null){
     window.myBar.destroy();
   }
  var date = $(this).val();
   $.ajax({
     url: "test/test",
     type: "post",
     data: {
       searchDate:date
     },
     dataType:'json',
     success: function(response){

       var randomScalingFactor = function(){ return Math.round(Math.random()*100)};

       var barChartData = {

         labels : response.namedata,
         datasets : [
           {
             fillColor : "rgba(151,187,205,0.5)",
             strokeColor : "rgba(151,187,205,0.8)",
             highlightFill : "rgba(151,187,205,0.75)",
             highlightStroke : "rgba(151,187,205,1)",
             data :  response.countdata
           }
         ]

       }

       var ctx = document.getElementById("canvas").getContext("2d");
       ctx.canvas.width = 200;
       ctx.canvas.height = 200;
       window.myBar = new Chart(ctx).Bar(barChartData, {
         responsive : true
       });

     }

   })
 })

Answer 3

将以下样式添加到画布的父元素：

-webkit-transform-style: preserve-3d;
-webkit-transform: translateZ(0);
-webkit-backface-visibility: hidden;

chartjs在鼠标悬停时非常快速地调整（闪烁）

3 个答案: