1
Мне действительно нужна помощь для этой вещи, над которой я работаю. В основном у меня есть 4 диаграммы, создаваемые chartjs. Я сделал 4 кнопки, которые просто показывают или скрывают желаемый DIV. Я почти уверен, что это работает на стороне jQuery, но я не настолько разбираюсь в том, что происходит здесь на стороне Chart.js.Chart.js - Переключить видимость диаграмм
Это демонстрационный https://jsfiddle.net/ttum6ppu/
<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>
\t \t \t <p>
\t \t \t \t <button type="button" class="btn btn-default btn-xs stanza_button" id="stanza" style="display:none;">Per stanza</button>
\t \t \t \t <button type="button" class="btn btn-primary btn-xs stanza_selected" id="stanza"><i class="fa fa-eye"></i> Per stanza</button>
\t \t \t \t <button type="button" class="btn btn-default btn-xs settimanale_button" id="settimanale">Andamento settimanale</button>
\t \t \t \t <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>
\t \t \t \t <button type="button" class="btn btn-default btn-xs mensile_button" id="mensile">Andamento mensile</button>
\t \t \t \t <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>
\t \t \t \t <button type="button" class="btn btn-default btn-xs annuo_button" id="annuo">Andamento annuo</button>
\t \t \t \t <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>
\t \t \t </p> \t
<script>
$(document).ready(function(){
$("#stanza").click(function(){
$(".stanza, .stanza_selected, .settimanale_button, .mensile_button, .annuo_button").show();
\t \t \t \t $(".settimanale, .mensile, .annuo, .stanza_button, .settimanale_selected, .mensile_selected, .annuo_selected").hide();
});
\t \t $("#settimanale").click(function(){
$(".settimanale, .settimanale_selected, .stanza_button, .mensile_button, .annuo_button").show();
\t \t \t \t $(".stanza, .mensile, .annuo, .stanza_selected, .settimanale_button, .mensile_selected, .annuo_selected").hide();
});
\t \t $("#mensile").click(function(){
$(".mensile, .mensile_selected, .stanza_button, .settimanale_button, .annuo_button").show();
\t \t \t \t $(".stanza, .settimanale, .annuo, .stanza_selected, .settimanale_selected, .mensile_button, .annuo_selected").hide();
});
\t \t $("#annuo").click(function(){
$(".annuo, .annuo_selected, .stanza_button, .settimanale_button, .mensile_button").show();
\t \t \t \t $(".stanza, .settimanale, .mensile, .stanza_selected, .settimanale_selected, .mensile_selected, .annuo_button").hide();
});
});
</script>
\t \t <div style="width: 50%">
\t \t \t \t \t <div style="height:70%;" class="stanza">
\t \t \t \t <canvas id="canvas" height="100px;"></canvas>
\t \t \t </div>
\t \t \t <div style="height:70%; display: none;" class="settimanale">
\t \t \t \t <canvas id="canvas2" height="100px;"></canvas>
\t \t \t </div>
\t \t \t <div style="height:70%; display: none;" class="mensile">
\t \t \t \t <canvas id="canvas3" height="100px;"></canvas>
\t \t \t </div>
\t \t \t <div style="height:70%; display: none;" class="annuo">
\t \t \t \t <canvas id="canvas4" height="100px;"></canvas>
\t \t \t </div>
\t \t </div>
\t <script>
\t var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
\t var barChartData = {
\t \t labels : ["January","February","March","April","May","June","July"],
\t \t datasets : [
\t \t \t {
\t \t \t \t fillColor : "rgba(220,220,220,0.5)",
\t \t \t \t strokeColor : "rgba(220,220,220,0.8)",
\t \t \t \t highlightFill: "rgba(220,220,220,0.75)",
\t \t \t \t highlightStroke: "rgba(220,220,220,1)",
\t \t \t \t data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
\t \t \t },
\t \t \t {
\t \t \t \t fillColor : "rgba(151,187,205,0.5)",
\t \t \t \t strokeColor : "rgba(151,187,205,0.8)",
\t \t \t \t highlightFill : "rgba(151,187,205,0.75)",
\t \t \t \t highlightStroke : "rgba(151,187,205,1)",
\t \t \t \t data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
\t \t \t }
\t \t ]
\t }
\t window.onload = function(){
\t \t var ctx = document.getElementById("canvas").getContext("2d");
\t \t window.myBar = new Chart(ctx).Bar(barChartData, {
\t \t \t responsive : true
\t \t });
var ctx = document.getElementById("canvas2").getContext("2d");
\t \t window.myBar = new Chart(ctx).Bar(barChartData, {
\t \t \t responsive : true
\t \t });
\t \t var ctx = document.getElementById("canvas3").getContext("2d");
\t \t window.myBar = new Chart(ctx).Bar(barChartData, {
\t \t \t responsive : true
\t \t });
var ctx = document.getElementById("canvas4").getContext("2d");
\t \t window.myBar = new Chart(ctx).Bar(barChartData, {
\t \t \t responsive : true
\t \t });
\t }
\t </script>
\t </body>Первая диаграмма отображается правильно, но при нажатии на вторую кнопку она ничего не показывает. Заранее спасибо
Уже пробовал ваше решение, но вы знаете .... это не хорошо ... Я собираюсь попросить на странице GitHub этого плагина. Спасибо –
np, я пробовал делать что-то подобное с Highcharts и помню, что это очень сложно, возможно, вы могли бы просто скрыть другие диаграммы, используя абсолютное позиционирование, z-index и большой левый%, как и левый: 1000%. Просто создайте класс, который называется hidden, со всеми этими стилями и добавьте его в три диаграммы, которые вы хотите скрыть, удалите их из каждого, когда вы хотите показать их – Pixelomo