javascript - template - sprockets-rails

La tabla de Morris JS no se carga en Twitter Panel de pestañas Bootstrap

Question

Tengo un gráfico de Morris JS que intenta cargar dentro de un panel de pestañas de Twitter Bootstrap. Las pestañas funcionan bien, pero el gráfico no se carga.

Parece que este artículo analiza el problema: http://www.doidea.se/blog/morris-js-charts-in-bootstrap-tabs

¿Cómo traduciría su solución a mi código de Rails?

Aquí está mi código:

Ver:

<!-- Nav tabs -->
<ul class="nav nav-tabs">
  <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
  <li><a href="#profile" data-toggle="tab">Profile</a></li>
  <li><a href="#messages" data-toggle="tab">Messages</a></li>
  <li><a href="#settings" data-toggle="tab">Settings</a></li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="home">...</div>
  <div class="tab-pane" id="profile">
    <%= content_tag :div, "", id: "info_chart", data: { info: @chart_data } %>
  </div>
  <div class="tab-pane" id="messages">...</div>
  <div class="tab-pane" id="settings">...</div>
</div>

Application.JS

$(''#myTab a'').click(function (e) {
  e.preventDefault()
  $(this).tab(''show'')
})

ControllerName.js.coffee

$ ->
  # only use morris if the post chart element is on the page.
  if $(''#info_chart'').length > 0
    Morris.Bar
      element: ''info_chart''
      data: $(''#info_chart'').data(''info'')
      xkey: ''x''
      ykeys: [''y'']
      labels: [''label'']

Answer 1

Primero, quiere verificar que está usando la versión correcta de morris.js, la rama principal actual en github tiene la función redraw ().

Segundo: asegúrese de que puede imprimir un gráfico en el dom, por ejemplo, su primera pestaña activa.

Tercero: agregue otro elemento de gráfico en una pestaña que no esté activa, agregue identificadores de datos para cada pestaña para poder volver a dibujar varios gráficos usando:

$(''ul.nav a'').on(''shown.bs.tab'', function (e) {
    var types = $(this).attr("data-identifier");
    var typesArray = types.split(",");
    $.each(typesArray, function (key, value) {
        eval(value + ".redraw()");
    })
});

Este js determinará qué identificadores de datos se preocupan siempre que se muestre una pestaña, puede tener múltiples elementos de gráfico separados por comas, por ejemplo. Luego tomará los valores / valores del identificador, que obviamente sería lo mismo que los elementos del gráfico y llamará a la función redraw () sobre ellos.

No veo la necesidad de hacerlo más complicado que eso para esto, siempre podrías convertirte en coffeescript por supuesto, pero esto debería funcionar.

Answer 2

Encontré una solución a mi situación para un solo gráfico en pestañas que no se visualizaban correctamente:

Guarde su gráfico como una variable:

var usage_graph = Morris.Line({
  // config
});

Luego escucha los cambios en las pestañas y vuelve a dibujar el gráfico:

$(''ul.nav a'').on(''shown.bs.tab'', function (e) {
    usage_graph.redraw();
});

Espero que esto ayude a alguien más.

Answer 3

Este código me funciona, pruébalo si tienes múltiples cartas en una sola pestaña:

$(document).on(''shown.bs.tab'', ''a[data-toggle="tab"]'', function (e) {
$.each(yourarray, function (index, value) {
                value.redraw();
            });
        });

Answer 4

Estaba teniendo exactamente el mismo problema, pero en mi caso ninguna de las soluciones anteriores funcionó.

Lo que funcionó para mí fue usar las pestañas jquery ui en su lugar ( enlace ). Estos funcionaron como un encanto.

Su código solo necesitaría una ligera reescritura. En lugar de

<!-- Nav tabs -->
<ul class="nav nav-tabs">
  <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
  <li><a href="#profile" data-toggle="tab">Profile</a></li>
  <li><a href="#messages" data-toggle="tab">Messages</a></li>
  <li><a href="#settings" data-toggle="tab">Settings</a></li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="home">...</div>
  <div class="tab-pane" id="profile">
    <%= content_tag :div, "", id: "info_chart", data: { info: @chart_data } %>
  </div>
  <div class="tab-pane" id="messages">...</div>
  <div class="tab-pane" id="settings">...</div>
</div>

escribir:

    <!-- Nav tabs and Panes-->
<div id="tabs">
    <ul>
      <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
      <li><a href="#profile" data-toggle="tab">Profile</a></li>
      <li><a href="#messages" data-toggle="tab">Messages</a></li>
      <li><a href="#settings" data-toggle="tab">Settings</a></li>
    </ul>


      <div  id="home">...</div>
      <div  id="profile">
        <%= content_tag :div, "", id: "info_chart", data: { info: @chart_data } %>
      </div>
      <div id="messages">...</div>
      <div  id="settings">...</div>
 </div>

Y luego solo agregas este script:

 <script>
  $(function() {
    $( "#tabs" ).tabs();
  });
  </script>

Espero que esto ayude.

Por cierto, todos los violines que he encontrado que intentan atrapar el evento ''shown.bs.tab'' ya no funcionan por alguna razón.

Answer 5

La respuesta superior es parcialmente correcta. El problema, sin embargo, es que la svg no se redimensiona. Para asegurarse de que el svg esté redimensionado, puede modificarlo por css:

    if ($(''#morris-stacked-bar-graph'').length > 0) {
        var morris_bar = Morris.Bar({
            element: ''morris-stacked-bar-graph'',
            data: [
                {x: ''2011 Q1'', y: 3, z: 2, a: 3},
                {x: ''2011 Q2'', y: 2, z: null, a: 1},
                {x: ''2011 Q3'', y: 0, z: 2, a: 4},
                {x: ''2011 Q4'', y: 2, z: 4, a: 3}
            ],
            xkey: ''x'',
            ykeys: [''y'', ''z'', ''a''],
            labels: [''Y'', ''Z'', ''A''],
            stacked: true,
            barColors: $(''#morris-stacked-bar-graph'').data(''colors'').split('','')
        });
        $(''ul.nav a'').on(''shown.bs.tab'', function (e) {
            morris_bar.redraw();
            $(''svg'').css({ width: ''100%'' });
        });
    }