ChartJS 中的“惰性初始化”

Question

我在页面上使用 Chart.js Version: 1.1.1 进行数据展示。我有 5 种不同类型的图表，它们在页面加载时一次性初始化。现在我想在我的页面中使用 lazy-initialize。 chartJS

是否有任何解决方法

谢谢！！！

Answer 1

用 H1 元素解释概念。每当 H1 出现在视口中时，调用一个函数来渲染图表。

您可以计算元素的偏移量（图表的 Div），然后将其与滚动值进行比较，例如：

$(window).scroll(function() {
   var hT = $('#scroll-to').offset().top,
       hH = $('#scroll-to').outerHeight(),
       wH = $(window).height(),
       wS = $(this).scrollTop();
   if (wS > (hT+hH-wH) && (hT > wS) && (wS+wH > hT+hH)){
      $('h1').addClass('view')
   } else {
      $('h1').removeClass('view')
   }
});

在示例中，我展示了向 H1 添加样式的演示。相反，您必须在此处呈现图表。

示例：Demo Link

ChartJS 中的“惰性初始化”

“lazy-initialize” In ChartJS

javascript

jquery

chart.js

chart.js2