Javascript Chartjs未显示在Foundation5选项卡中 我使用CARTJS基金会,我有三张图表,我想显示在三个选项卡上。

Javascript Chartjs未显示在Foundation5选项卡中 我使用CARTJS基金会,我有三张图表,我想显示在三个选项卡上。,javascript,zurb-foundation,chart.js,Javascript,Zurb Foundation,Chart.js,图表仅显示在第一个选项卡中。如何让它显示在第二个和第三个选项卡中?有人能用JSFIDLE演示解决方案吗 HTML: 如您所见,您正在window.onload函数中执行图表的新实例。这是第一个原因 仔细看一下执行情况: var ctx = document.getElementById("day-graph").getContext("2d"); 您在一个画布对象上获取了上下文,但在选项卡中有三个视图。Sciprt无法确定它应该执行其他图表 您需要重复该方法3次-选项卡内的图表数量,例如: /

图表仅显示在第一个选项卡中。如何让它显示在第二个和第三个选项卡中?有人能用JSFIDLE演示解决方案吗

HTML:


如您所见,您正在window.onload函数中执行图表的新实例。这是第一个原因

仔细看一下执行情况:

var ctx = document.getElementById("day-graph").getContext("2d");
您在一个画布对象上获取了上下文,但在选项卡中有三个视图。Sciprt无法确定它应该执行其他图表

您需要重复该方法3次-选项卡内的图表数量,例如:

//some previous code    
var ctx = document.getElementById("week-graph").getContext("2d");
      window.myLine = new Chart(ctx).Line(lineChartData, {
        responsive: true
      });
但出于优化目的,如果选项卡当前可用,则应执行实例。这件事你应该自己做

var ctx = document.getElementById("day-graph").getContext("2d");
//some previous code    
var ctx = document.getElementById("week-graph").getContext("2d");
      window.myLine = new Chart(ctx).Line(lineChartData, {
        responsive: true
      });