Gráfico de Discurso (Plotly) Incrustado

:information_source: Resumen Incrustar gráficos Plotly en publicaciones a partir de una ecuación
:hammer_and_wrench: Repositorio GitHub - NateDhaliwal/discourse-graph-embed
:question: Guía de instalación Cómo instalar un tema o componente de tema
:open_book: ¿Nuevo en los temas de Discourse? Guía para principiantes sobre el uso de temas de Discourse

Instalar este componente de tema

Este componente permite a los usuarios agregar gráficos usando Plotly.js a sus temas y respuestas.

Para usar esto, haz clic en el icono image (:chart_increasing:) en la barra de herramientas de formato. Luego, simplemente edita la ecuación dentro de [wrap][/wrap]. (Por pura coincidencia, descubrí que las comillas invertidas en el wrap no afectaban nada)

Por ejemplo:

Además, puedes pasar el cursor sobre el gráfico para encontrar las coordenadas de los puntos:

Originalmente intenté usar un embed de Desmos, pero eso no funcionó muy bien. Plotly (sin afiliación) es una gran biblioteca (¡y de código abierto!) que puede hacer esto, junto con MathJS (también de código abierto) para ejecutar los cálculos.

Plotly también te permite usar cosas como seno, coseno y tangente, así como logaritmos (base 10) y otros.

Con Plotly, también puedes descargar el gráfico como PNG haciendo clic en el icono :camera: en el embed en la parte superior derecha.

:warning: NOTA: Los gráficos de funciones trigonométricas (por ejemplo, sin, cos, tan) no son ‘curvos’ y terminan siendo un poco puntiagudos.

Opcionalmente, puedes habilitar la configuración show_graph_in_modal (desactivada por defecto) para mostrar el gráfico en una ventana emergente modal en lugar de debajo de la publicación, para que no ocupe tanto espacio.

En la modal, haz clic en el botón Cargar Gráfico[1] para cargar y mostrar el gráfico.

Publicación:

Modal:

¡Espero que esto sea útil!


  1. La etiqueta y el título del botón son editables como traducciones del tema ↩︎

7 Me gusta

El icono es bastante… ¿debería describirlo pálido :joy:?

1 me gusta

He implementado una corrección. ¿Funciona ahora?

1 me gusta

Hermosamente. Gracias.

1 me gusta

He añadido una nueva configuración show_graph_in_modal para mostrar el gráfico en una ventana modal en lugar de debajo de la publicación, para que no ocupe tanto espacio.

En la ventana modal, haz clic en el botón Cargar Gráfico[1] para, bueno, cargar y mostrar el gráfico.

Publicación:

Ventana modal:


  1. La etiqueta y el título del botón se pueden editar como traducciones del tema ↩︎

4 Me gusta

Esto es genial. Buen trabajo Nate :+1:

3 Me gusta