Javascript 每次用户滚动到Chart.js时，它的大小都会翻倍

这里有一个解决这个问题的方法

当用户滚动到图表并在窗口中可见时，图表将与动画一起显示。但是，当用户向上滚动然后再向下滚动时，图表会重新出现，大小会加倍

我希望图表保持不变，一旦用户第一次滚动到它时它就出现了

代码如下：

var data = [{
    value: 30,
    color: "#F38630"
}, {
    value: 50,
    color: "#E0E4CC"
}, {
    value: 100,
    color: "#69D2E7"
}];

var inView = false;

function isScrolledIntoView(elem)
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemTop <= docViewBottom) && (elemBottom >= docViewTop));
}

$(window).scroll(function() {
    if (isScrolledIntoView('#canvas')) {
        if (inView) { return; }
        inView = true;
        new Chart(document.getElementById("canvas").getContext("2d")).Pie(data);
    } else {
        inView = false;  
    }
});

var数据=[{
数值：30，
颜色：“F38630”
}, {
价值：50，
颜色：“E0E4CC”
}, {
数值：100，
颜色：“69D2E7”
}];
var inView=假；
函数IsCrolledinToView（elem）
{
var docViewTop=$（window.scrollTop（）；
var docViewBottom=docViewTop+$（window）.height（）；
var elemTop=$（elem）.offset（）.top；
var elemBottom=elemTop+$（elem）.height（）；
返回（（elemTop=docViewTop））；
}
$（窗口）。滚动（函数（）{
if（isScrolledIntoView（“#canvas”））{
if（inView）{return；}
inView=true；
新图表（document.getElementById（“canvas”）.getContext（“2d”））.Pie（数据）；
}否则{
inView=false；
}
});

除了大小加倍（我无法复制）之外，每次将图形滚动到视图外时，您都要重置

inView

变量。当它再次出现在视图中时，您正在创建一个新的图形。每次都是这样

解决方案是在图形渲染一次后，不要将

inView

设置回

false

：

var graphRendered = false;
...
$(window).scroll(function() {
  if (! graphRendered && isScrolledIntoView('#canvas')) {
    graphRendered = true;
    new Chart(document.getElementById("canvas").getContext("2d")).Pie(data);
  }
});

（重新命名为

inView

为

graphRendered

，以更好地适应其用途）

---

小提琴似乎起作用了correctly@CDspace如果您向下滚动到图表，请再次向上滚动，使图表不可见，然后再次向下滚动，图表将重新加载，但两倍的大小对我来说也不会发生翻倍的情况（Mac上的Chrome 32）。@robertklep即使大小没有翻倍，每次用户在窗口中滚动回它时，它仍然会运行！很好用！！谢谢