0
264
Views¿Cómo decirle al renderizador de Highcharts que haga la ventana gráfica más grande?
En el pasado, he dibujado tablas debajo del gráfico basadas en la serie. Esto funciona porque puedo decirle a Highcharts que alinee verticalmente la leyenda, la mueva hacia la izquierda, y puedo usar la altura y el posicionamiento de la leyenda, así como la información de marca del eje x para averiguar dónde dibujar las líneas de la tabla:
Esto aprovecha el hecho de que una vez que configuro la leyenda vertical, Highcharts configurará internamente la ventana gráfica (¿cuadro de visualización?) lo suficientemente grande como para que la leyenda sea visible, y como mi tabla se alinea con la leyenda, también es visible.
Ahora tengo una situación en la que necesito dibujar una tabla debajo del gráfico que no se basa en la serie. De hecho, moví la leyenda para que flotara en la parte superior derecha del gráfico porque solo hay una serie y encaja muy bien allí.
Descubrí cómo colocar las líneas de mi tabla en función de las dimensiones del cuadro de la etiqueta del eje x (junto con la información de marca), pero mi tabla se extiende fuera de la ventana gráfica (¿cuadro de visualización?) y no está visible:
Si voy tras el hecho y hago
myChart.renderer.box.setAttribute("viewBox", "0 0 1200 1200")para "alejar", puedo ver que toda mi tabla se dibujó, está allí en el SVG:
Entonces, ¿cómo le digo al renderizador de Highcharts que extienda la ventana gráfica/el cuadro de visualización/el lienzo (cualquiera que sea el término correcto) hacia abajo para que cuando agregue mi tabla, sea visible?
Active el dibujo de la tabla desde un controlador de eventos de redraw , y si se trata de configurar alguna opción/parámetro, puedo hacer fácilmente los cálculos que necesito para averiguar cuánto extender de antemano e incluir eso en un chart.update({...stuff...}, true) para que tenga el tamaño correcto cuando vaya a dibujar mi tabla.
O puedo meterme con chart.renderer directamente en el código si eso es lo que se necesita.
1 answers
Answer question0
Bien, lo descubrí.
chart.renderer tiene una función para setSize , que establecerá el tamaño general del elemento raíz SVG en sí mismo, sin embargo , la raíz SVG está contenida dentro del div "contenedor de gráficos altos", que tiene estilos CSS en línea para establecer la altura y el ancho, y lo que es más importante, tiene overflow: hiddden , por lo que también debe establecer la altura del div del contenedor para que el SVG aumentado sea visible. Afortunadamente, es fácilmente accesible en chart.container .
En mi caso, necesito dibujar condicionalmente una tabla después de acercar o alejar el zoom, por lo que en mi función para dibujar la tabla, también calculo la altura que necesitará y la devuelvo para poder ajustar la raíz SVG y el contenedor div después de la se dibuja la tabla. Se parece un poco a esto:
const drawTable = async (chart, dataForTable) => { // figure out how much room the table is going to take up const extraHeight = (rowHeight * dataForTable.length) + littleExtraOffset // create the SVG container for the table const group = chart.renderer.g('bottom-table').add(); // draw all the lines for the table etc and add them to the group, then return { group, extraHeight } } const redrawEventHandler = (event) => { // do stuff to figure out if we need to draw a table or not let newWidth = baseWidth; let newHeight = baseHeight; if (shouldDrawTable) { const { dataForTable } = this.props; drawTable(event.target, dataForTable).then(tableResult => { // save the table SVG group so we can easily destroy it later this.tableGroup = tableResult.group; // calculate the new total height newHeight += tableResult.extraHeight; this.chart.renderer.setSize(newWidth, newHeight); this.chart.container.style.height = `${newHeight}px`; }); } else { // no table, newWidth and newHeight are still // the original height and width this.chart.renderer.setSize(newWidth, newHeight); this.chart.container.style.height = `${newHeight}px`; } }