Chart.js

Question

我正在做的这件事真的需要帮助。基本上我有 4 个由 chartjs 渲染的图表。我制作了 4 个按钮，它们只是显示或隐藏所需的 DIV。我很确定它在 jQuery 方面有效，但我不太了解 Chart.js 方面发生的事情。

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>

   <p>
    <button type="button" class="btn btn-default btn-xs stanza_button" id="stanza" style="display:none;">Per stanza</button>
    <button type="button" class="btn btn-primary btn-xs stanza_selected" id="stanza"><i class="fa fa-eye"></i> Per stanza</button>
    <button type="button" class="btn btn-default btn-xs settimanale_button" id="settimanale">Andamento settimanale</button>
    <button type="button" class="btn btn-primary btn-xs settimanale_selected" id="settimanale" style="display:none;"><i class="fa fa-eye"></i> Andamento settimanale</button>
    <button type="button" class="btn btn-default btn-xs mensile_button" id="mensile">Andamento mensile</button>
    <button type="button" class="btn btn-primary btn-xs mensile_selected" id="mensile" style="display:none;"><i class="fa fa-eye"></i> Andamento mensile</button>
    <button type="button" class="btn btn-default btn-xs annuo_button" id="annuo">Andamento annuo</button>
    <button type="button" class="btn btn-primary btn-xs annuo_selected" id="annuo" style="display:none;"><i class="fa fa-eye"></i> Andamento annuo</button>
   </p> 

<script>
$(document).ready(function(){
    $("#stanza").click(function(){
        $(".stanza, .stanza_selected, .settimanale_button, .mensile_button, .annuo_button").show();
    $(".settimanale, .mensile, .annuo, .stanza_button, .settimanale_selected, .mensile_selected, .annuo_selected").hide();
    });

   $("#settimanale").click(function(){
        $(".settimanale, .settimanale_selected, .stanza_button, .mensile_button, .annuo_button").show();
    $(".stanza, .mensile, .annuo, .stanza_selected, .settimanale_button, .mensile_selected, .annuo_selected").hide();
    });

   $("#mensile").click(function(){
        $(".mensile, .mensile_selected, .stanza_button, .settimanale_button, .annuo_button").show();
    $(".stanza, .settimanale, .annuo, .stanza_selected, .settimanale_selected, .mensile_button, .annuo_selected").hide();
    });

   $("#annuo").click(function(){
        $(".annuo, .annuo_selected, .stanza_button, .settimanale_button, .mensile_button").show();
    $(".stanza, .settimanale, .mensile, .stanza_selected, .settimanale_selected, .mensile_selected, .annuo_button").hide();  
    });
});
</script>
  <div style="width: 50%">
     <div style="height:70%;" class="stanza">
    <canvas id="canvas" height="100px;"></canvas>
   </div>
   <div style="height:70%; display: none;" class="settimanale">
    <canvas id="canvas2" height="100px;"></canvas>
   </div>
   <div style="height:70%; display: none;" class="mensile">
    <canvas id="canvas3" height="100px;"></canvas>
   </div>
   <div style="height:70%; display: none;" class="annuo">
    <canvas id="canvas4" height="100px;"></canvas>
   </div>
  </div>


 <script>
 var randomScalingFactor = function(){ return Math.round(Math.random()*100)};

 var barChartData = {
  labels : ["January","February","March","April","May","June","July"],
  datasets : [
   {
    fillColor : "rgba(220,220,220,0.5)",
    strokeColor : "rgba(220,220,220,0.8)",
    highlightFill: "rgba(220,220,220,0.75)",
    highlightStroke: "rgba(220,220,220,1)",
    data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
   },
   {
    fillColor : "rgba(151,187,205,0.5)",
    strokeColor : "rgba(151,187,205,0.8)",
    highlightFill : "rgba(151,187,205,0.75)",
    highlightStroke : "rgba(151,187,205,1)",
    data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
   }
  ]

 }
 window.onload = function(){
  var ctx = document.getElementById("canvas").getContext("2d");
  window.myBar = new Chart(ctx).Bar(barChartData, {
   responsive : true
  });

var ctx = document.getElementById("canvas2").getContext("2d");
  window.myBar = new Chart(ctx).Bar(barChartData, {
   responsive : true
  });
  var ctx = document.getElementById("canvas3").getContext("2d");
  window.myBar = new Chart(ctx).Bar(barChartData, {
   responsive : true
  });

var ctx = document.getElementById("canvas4").getContext("2d");
  window.myBar = new Chart(ctx).Bar(barChartData, {
   responsive : true
  });
 }

 </script>
 </body>

第一个图表显示正确，但是当您按下第二个按钮时，它什么也没有显示。提前谢谢你

Answer 1

这很麻烦，认为这是因为您使用 Chart.js 创建图表时使用的 iframe 使用起来从来都不是一件有趣的事情。如果不强制重新加载页面，我认为您无法做到。 canvas 在隐藏图表上以 0px 的高度和宽度绘制，因此仅使用 jQuery 更改其父 div 显示来阻止不会削减芥末。

I've updated your fiddle 这样点击每个按钮就会分别显示每个图表，但我唯一无法解决的问题是在页面加载时隐藏最后三个图表。希望这是您可以使用的东西。

我已经从图表中删除了 display: none

Answer 2

在我看来，更好的解决方案是修改 DOM 以替换 canvas 元素，这样您就可以用新数据重新绘制它：

var canvas_html = '<canvas id="canvas" height="100px;"></canvas>';
var drawChart = function(data) {
    // reinit canvas
    $('#canvas_container').html(canvas_html);

    // redraw chart
    var ctx = document.getElementById("canvas").getContext("2d");
        window.myBar = new Chart(ctx).Bar(data, {
            responsive : true
    }); 
};

我已经对你的 fiddle 做了一个 update，所以你可以看到结果。

Answer 3

我有同样的问题并通过查看容器 div 的可见性解决了它，如果 div 是可见的渲染图表，否则什么也不做。所以在切换选项卡调用功能以呈现图表时，到那时 div 应该是可见的。这是示例代码，

if ($(".canvas-holder2").is(":visible")) {

    window['myDoughnut'] = new Chart($("#chart-area")[0]
            .getContext("2d"))
            .Doughnut(data, {

                responsive: true,
                animateScale: true
            });

                window['myDoughnut'].update();
}

Chart.js - 切换图表的可见性

Chart.js - Toggle visibility of charts

javascript

jquery