chartjs 在鼠标悬停时快速调整大小（闪烁）

Question

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

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

您需要先销毁图表，然后再在同一 canvas 上重新创建图表。所以你可以像这样编辑你的重绘：

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

这里有一个 fiddle，因此您实际上可以重新调整运行 window 的大小以查看它是否正常工作 http://fiddle.jshell.net/leighking2/4apqqjL0/

以及您喜欢的片段

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

<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>

Answer 2

您需要销毁图表之前的数据。下面是 Ajax 请求的示例。如果你使用 destroy 你应该使用 canvas 高度和宽度，否则你的图形大小会在每次响应中减少。

$("#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

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

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

chartjs 在鼠标悬停时快速调整大小（闪烁）

chartjs resizing very quickly (flickering) on mouseover

jquery

twitter-bootstrap

chart.js