javascript - Cómo hacer que los gráficos dc.js respondan
crossfilter d3 (2)
¿Hay alguna manera de hacer que los gráficos dc.js respondan?
Estoy luchando mucho para que los gráficos se ajusten al tamaño del escritorio.
Estoy usando Twitter Bootstrap 3. Almaceno el ancho del div a una variable y lo paso al ancho del gráfico. Esto no hará que el gráfico responda. Pero en la primera carga, los gráficos alcanzan el ancho de acuerdo con el tamaño de la pantalla.
Pero ahora me enfrento a un desafío, ya que tengo un archivo diferente para el gráfico dc.js
Y estoy llamando a través de un iframe .
Cuando lo llamo a través de iframe el ancho es 0 para todos los divs, y no aparecen gráficos en la página web.
Pero cuando recargo el iframe solo, aparecen los gráficos.
Incluso intenté cargar el marco cuando hacemos clic en ese elemento de navegación en particular. Pero incluso eso no funcionó para mí.
Que alguien me ayude a superar este problema.
Cuando pase null al llamar a los .width() y .height() (o no llamarlos en absoluto) en la instancia del gráfico dc.js, utilizará el ancho y alto del elemento delimitador (que luego se puede diseñar con algunos Evergreen responsive css classes, ya sea desde bootstrap o algún otro framework css responsive;)).
Para obtener más información, consulte: https://github.com/dc-js/dc.js/blob/master/web/docs/api-latest.md#dc.baseMixin+height
He configurado un plunker con una demostración de dc.js que tengo que volver a enviar cuando se cambia el tamaño, y obtener el ancho del elemento contenedor para determinar el tamaño. Esto está incrustado en un iframe y funciona como está. Sugiero que juegues con este plunker para que se ajuste a tu css, ya que solo estoy haciendo la configuración iframe más simple posible. Me imagino que hiciste algo similar a esto, así que no estoy exactamente seguro de en qué te equivocaste. Esperemos que esto ayude.
gráfico de DC sensible en un iframe
Dada una página estándar con un iframe:
<body> <h1>Test</h1> <iframe src="iframe.html" class="iframe"></iframe> </body>
Y un iframe con contenedores y scripts para cargar el gráfico:
<body> <h2>inside iframe</h2> <div id="box-test"></div> <div id="pie-chart"></div> <script src="script.js" type="text/javascript"></script> </body>
Una llamada para obtener el ancho que necesitas.
var width = document.getElementById(''box-test'').offsetWidth;
Usando ese ancho para el render inicial
chart
.width(width)
.height(480)
.margins({top: 10, right: 50, bottom: 30, left: 50})
.dimension(experimentDimension)
.group(speedArrayGroup)
.elasticY(true)
.elasticX(true);
Y finalmente una función para manejar qué hacer en el tamaño de la ventana.
window.onresize = function(event) {
var newWidth = document.getElementById(''box-test'').offsetWidth;
chart.width(newWidth)
.transitionDuration(0);
pie.transitionDuration(0);
dc.renderAll();
chart.transitionDuration(750);
pie.transitionDuration(750);
};