ChartJS диаграммы не генерируются в пределах вкладок

Question

Я пытаюсь использовать ChartsJS в системе табуляции. Первый график на первой вкладке отображается, но последующие диаграммы не отображаются.

Я считаю, что это связано с тем, что вкладки имеют display:none, поэтому, когда диаграммы сначала генерируются, они создаются в div с нулевыми размерами.

Это устраняет проблему, но ломает вкладки:

.vertical-nav>div.tab-content { 
    display: block !important; 
} 

Имея это в виду, я перепробовал все виды способов регенерации чарты после вкладка открыта, или силы display:block непосредственно перед порождающая диаграмма. Ничего не работает.

Вот моя попытка регенерировать диаграммы:

jQuery(document).ready(function() { 

    jQuery('.vertical-nav ul li span').click(function(){ 

     // Target the canvas within the correct tab 
     var tabIndex = jQuery(this).parent().index(); 
     var canvasID = jQuery('.vertical-nav .tab-content:eq(' + tabIndex + ') canvas').attr('id'); 

     theChart = charts[canvasID].chart; 
     builtChart = charts[canvasID].builtChart; 

     // Destroy all of the charts so that we can rebuild them 
     for (var key in charts) { 
      if (charts.hasOwnProperty(key)) { 
       charts[key].builtChart.destroy(); 
      } 
     } 

     // get the chart data and options from the charts object 
     newData = charts[canvasID].data; 
     newOptions = charts[canvasID].options; 

     // create the new chart 
     newChart = document.getElementById(canvasID).getContext("2d"); 
     new Chart(newChart).Line(newData, newOptions); 

    }); 
}) 

Сайт постановка: http://telcomplusplc.uberleaf.com/company/?tab=our-growth

Я даже попытался установить тайм-аут, чтобы задержать поколение диаграммы, пока не появится вкладка, но не удачи.

В приведенном выше URL-адресе вы можете видеть, что первый график генерирует и регенерирует, как следует. Остальные из них не имеют (по-видимому, потому, что у них есть display:none div первого поколения).

Любая помощь очень ценится. Приятно дать дополнительную информацию, если необходимо.

Update

При изменении размеров окна, график перерисовывается. Вот код, который (в chart.js):

// Attach global event to resize each chart instance when the browser resizes 
helpers.addEvent(window, "resize", (function(){ 
    // Basic debounce of resize function so it doesn't hurt performance when resizing browser. 
    var timeout; 
    return function(){ 
     clearTimeout(timeout); 
     timeout = setTimeout(function(){ 
      each(Chart.instances,function(instance){ 
       // If the responsive flag is set in the chart instance config 
       // Cascade the resize event down to the chart. 
       if (instance.options.responsive){ 
        instance.resize(instance.render, true); 
       } 
      }); 
     }, 50); 
    }; 
})()); 

Я думаю, что мне нужно, чтобы иметь возможность стрелять, что из функции мыши. Я пробовал неудачу, мои навыки JS не так хороши.

Answer 1

Я нашел решение. Я был близок с кодом, который у меня был в вопросе. Кажется, мне нужно уничтожить и изменить размеры диаграмм.

Мне также пришлось изменить статус вкладок display вручную.

Вот что работает для меня:

function createNewChart(canvasID) { 
     // get the chart data and options from the charts object 
     newData = charts[canvasID].data; 
     newOptions = charts[canvasID].options; 

     // create the new chart 
     theChart = document.getElementById(canvasID).getContext("2d"); console.dir(theChart); 
     new Chart(theChart).Line(newData, newOptions); 
    } 

    jQuery('.vertical-nav ul li').click(function(){ 

     // Target the canvas within the correct tab 
     var tabIndex = jQuery(this).index(); 
     var canvasID = jQuery('.vertical-nav .tab-content:eq(' + tabIndex + ') canvas').attr('id'); 

     theChart = charts[canvasID].chart; 
     builtChart = charts[canvasID].builtChart; 

     // Destroy all of the charts so that we can rebuild them 
     for (var key in charts) { 
      if (charts.hasOwnProperty(key)) { 
       jQuery('.vertical-nav .tab-content:eq(' + tabIndex + ')').css('display', 'block'); 
       jQuery('.vertical-nav .tab-content:eq(' + tabIndex + ') .tab-content-chart').css('display', 'block'); 
       charts[key].builtChart.destroy(); 
       charts[key].builtChart.resize(); 
      } 
     } 

     createNewChart(canvasID); 

    }); 

Answer 2

Если вы используете дисплей: нет, то chartjs не знает размера, чтобы сделать диаграмму, а затем не делает. Если вы переключитесь на jquery.hide()/show(), он будет работать. Вот jsfiddle

* Скрипка работает без него, но если у вас много контента, вам может понадобиться временно скрыть область.

Javascript

var data1 = { 
    labels: ["January", "February", "March", "April", "May", "June", "July"], 
    datasets: [{ data: [65, 59, 80, 81, 56, 55, 40] }] 
}; 
var data2 = { 
    labels: ["January", "February", "March", "April", "May", "June", "July"], 
    datasets: [{ data: [65, 59, 80, 81, 56, 55, 40] }] 
}; 

// Load each chart and hide() the tab immediately. 

var ctx = document.getElementById('chart1').getContext('2d'); 
var chart1 = new Chart(ctx).Bar(data1); 
$('#tab1').hide(); 

var ctx = document.getElementById('chart2').getContext('2d'); 
var chart2 = new Chart(ctx).Line(data2); 
$('#tab2').hide(); 

/* 
// will not work because chart is not rendered 
$('#tab1_btn').on('click',function(){ 
    $('#tab1').css('display','block'); 
    $('#tab2').css('display','none') }) 
$('#tab2_btn').on('click',function(){ 
    $('#tab1').css('display','none'); 
    $('#tab2').css('display','block') }) 
*/ 

$('#tab1_btn').on('click',function(){ 
    $('#tab1').show(); 
    $('#tab2').hide() 
}) 
$('#tab2_btn').on('click',function(){ 
    $('#tab1').hide(); 
    $('#tab2').show() 
}) 

// if you have a lot of content in multiple tabs 
// it may be necessary to temporarily cover the content 
$('#tab_cover').hide(); 

HTML

<button id="tab1_btn">tab1</button> 
<button id="tab2_btn">tab2</button> 
<div id="tab_cover"> </div> 
<div id="tabs"> 
    <div id="tab1" class="tab"> 
     <canvas id="chart1" class="chart" width="400" height="300"></canvas> 
    </div> 
    <div id="tab2" class="tab"> 
     <canvas id="chart2" class="chart" width="400" height="300"></canvas> 
    </div> 
</div> 

CSS

/* will not work because chart is not rendered 
.tab { display:none } */ 
.chart { width:50% } 
.float { float:right; width:50%; } 
#tab_cover { background:#9ff; height: 100% !important; width:100%; position: absolute; z-index: 300; } 

Answer 3

я бегала в одних и те же проблемы при использовании скрытых див, что только отображения на определенный выбор из выпадающего списка , То, что я нашел для работы, похоже на то, что было сделано. Я создал графики, а затем они были созданы только после того, как был сделан выбор.

HTML:

<div> 
    <select> 
     <option value="option-1">Option 1</option> 
     <option value="option-2">Option 2</option> 
     <option value="option-3">Option 3</option> 
    </select> 
</div> 
<div class="chart1"> 
    <canvas id="chart1"></canvas> 
</div> 

<div class="chart2"> 
    <canvas id="chart2"></canvas> 
</div> 

<div class="chart3"> 
    <canvas id="chart3"></canvas> 
</div> 

Javascript:

//example of chart variables (I only included 1 example) 
    var chart1 = { 
     labels : ["2009","2010","2011","2012","2013","2014"], 
     labelAlign: 'center', 
     datasets : [ 
      { 
       label: "Visitor Average", 
       fillColor : "rgba(255,255,255,0)", 
       strokeColor : "rgba(0,34,221,1)", 
       pointColor : "rgba(0,34,221,1)", 
       pointStrokeColor : "#fff", 
       pointHighlightFill : "#fff", 
       pointHighlightStroke : "rgba(0,34,221,1)", 
       data: [28, 48, 40, 19, 86, 27] 
      }, 
      { 
       label: "Baseline Average", 
       fillColor : "rgba(255,255,255,0)", 
       strokeColor : "rgba(255,0,0,1)", 
       pointColor : "rgba(255,0,0,1)", 
       pointStrokeColor : "#fff", 
       pointHighlightFill : "#fff", 
       pointHighlightStroke : "rgba(255,0,0,1)", 
       data: [65, 59, 80, 81, 56, 55] 
      } 
     ] 

    } 

window.onload = function(){ 
    var ctx1 = document.getElementById("chart1").getContext("2d"); 
    window.myLine1 = new Chart(ctx1).Line(chart1, { 
     responsive: true, 
    }); 
} 

//change graph per drop-down selection 
    $(document).ready(function(){ 
     $("select").change(function(){ 
      $("select option:selected").each(function(){ 
       if($(this).attr("value")=="option-1"){ 
        $(".chart2").hide(); 
        $(".chart3").hide(); 
        $(".chart1").show(); 
        var ctx1 = document.getElementById("chart1").getContext("2d"); 
        window.myLine1 = new Chart(ctx1).Line(chart1, { 
         responsive: true, 
        }); 
       } 
       if($(this).attr("value")=="option-2"){ 
        $(".chart2").show(); 
        $(".chart1").hide(); 
        $(".chart3").hide(); 
        var ctx2 = document.getElementById("chart2").getContext("2d"); 
        window.myLine2 = new Chart(ctx2).Line(chart2, { 
         responsive: true, 
        }); 
       } 
       if($(this).attr("value")=="option-3"){ 
        $(".chart3").show(); 
        $(".chart1").hide(); 
        $(".chart2").hide(); 
        var ctx3 = document.getElementById("chart3").getContext("2d"); 
        window.myLine3 = new Chart(ctx3).Line(chart3, { 
         responsive: true, 
        }); 
       } 
      }); 
     }).change(); 
    }); 

Answer 4

Принимая вкладку Bootstrap в качестве примера, мое решение, чтобы добавить класс .loading-data к .tab-content перед визуализацией с помощью chart.js и удалить класс после того, как рендеринг сделан.

.tab-content.loading-data .tab-pane { 
    display: block; 
} 

В Таким образом, .tab-pane s будет отображаться в момент предоставления chartjs-х годов.