Chartjs未显示在Foundation5选项卡中

Chartjs not showing up in Foundation5 Tabs

本文关键字：选项 Foundation5 显示 Chartjs      更新时间：2023-11-12

我在Foundation中使用Chartjs，我有三个图表要显示在三个选项卡上。

图表只显示在第一个选项卡中。如何使它显示在第二个和第三个选项卡中？有人能用JSFiddle演示解决方案吗？

HTML:

<ul id="view-tabs" class="row tabs" data-tab>
    <li class="tab-title active small-12 medium-4 day"><a href="#day">View Day</a></li>
    <li class="tab-title small-12 medium-4 week"><a href="#week">View Week</a></li>
    <li class="tab-title small-12 medium-4 month"><a href="#month">View Month</a></li>
</ul> 
<div class="tabs-content">
    <div class="content day-data active" id="day">
        <canvas id="day-graph" width="300" height="300"></canvas> 
    </div>
    <div class="content week-data" id="week">
        <canvas id="week-graph" width="300" height="300"></canvas>
    </div>
    <div class="content month-data id="month">
        <canvas id="month-graph" width="300" height="300"></canvas>
    </div>
</div>

图表js-这个脚本只显示#day-graph，但如果我把它放在第二个或第三个选项卡中，它就不会显示

var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
  var lineChartData = {
    labels : ["January","February","March","April","May","June","July"],
    datasets : [
      {
        label: "Visitors",
        fillColor : "rgba(148,194,116, 0.5)",
        strokeColor : "rgba(220,220,220,1)",
        pointColor : "rgba(220,220,220,1)",
        pointStrokeColor : "#fff",
        pointHighlightFill : "#fff",
        pointHighlightStroke : "rgba(220,220,220,1)",
        data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
      }
    ]
  }
window.onload = function(){
  var ctx = document.getElementById("day-graph").getContext("2d");
  window.myLine = new Chart(ctx).Line(lineChartData, {
    responsive: true
  });
}
正如您所看到的，您正在window.onload函数中执行Chart的新实例。这是第一个原因。

仔细看看执行情况：

var ctx = document.getElementById("day-graph").getContext("2d");

您将上下文置于一个画布对象之上，但在选项卡中有三个视图。Sciprt无法确定它是否应该执行其他图表。

U需要重复该方法3次-选项卡内的图表数量，例如：

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

但出于优化目的，如果选项卡当前可用，则您应该执行实例。这件事你应该自己做。

http://foundation.zurb.com/docs/components/tabs.html#callbacks

相关文章：