Así que obtuve esto de una herramienta de diseño que tenemos a nuestro servicio. Se supone que esta clase div debe agregarse en las páginas en las que queremos generar un gráfico de indicador con la información dada.
<div class="gauge" id="g0" data-settings=' { "value": 9, "min": 0, "max": 100, "units": "%", "limits": [ {"from": 0, "to": 30, "color": "green", "label": "Low attrition"}, {"from": 31, "to": 70, "color": "gray", "label": "Moderate attrition"}, {"from": 71, "to": 100, "color": "red", "label": "High attrition"} ] }' ></div>Entonces, lo que necesito aprender es cómo modifico los valores pasados a la configuración de datos aquí para hacer que el gráfico de indicador sea más dinámico. Voy a obtener algunos datos analizando un JSON que obtengo del backend.
var Data = JSON.parse("{{data_attrition|escapejs}}");Y esto lo quiero pasar a algunas de las variables en la configuración de datos, por ejemplo, cambie el "valor" de 9 a lo que obtenga del backend.
Veo que usa JS, por lo que una opción es utilizar el método .get() de jquery para realizar una solicitud al servidor para obtener el JSON en la forma que necesita (tal vez en función de algunos parámetros), y el uso .html() o propiedades data() para configurar los datos dinámicamente. Verifique esto como un comienzo: https://api.jquery.com/data/