Question

我使用Chartjs和Foundation我有三个图表，我希望在三个标签上显示。

图表仅显示在第一个标签中。如何在第二个和第三个标签中显示它？有人可以用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>

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

Answer 1

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

仔细看看 - 执行：

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

但是为了优化目的，你应该执行当前可用的选项卡IF实例。这件事你应该自己做。

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

Chartjs没有出现在Foundation5标签中

1 个答案: