Estoy usando la plantilla "start bootstrap4" para mi proyecto Django. Quiero editar mis propios datos en el gráfico de muestra. Necesito cambiarlo en el archivo chart-pie-demo.js
Ya creé la lista de datos que quiero agregar al gráfico. Los datos se definen en mi views.py :
def chart(request): sheet2022 = client.open('sheet 2022') instance = sheet2022.get_worksheet(0) mysheet = instance.get_all_records() rpending2022 = list(filter(lambda datapending2022: Mi=len(tuple(d for d in rpending2022 if d['Receiver'] == 'Mike')) Lu=len(tuple(d for d in rpending2022 if d['Receiver'] == 'Lucy')) Ja=len(tuple(d for d in rpending2022 if d['Receiver'] == 'Jack')) mydata = [Mi, Lu, Ja] context = {'mydata': mydata} return render(request,'charts.html', context) Mi archivo chart-pie-demo.js :
var ctx = document.getElementById("myPieChart"); var myPieChart = new Chart(ctx, { type: 'doughnut', data: { labels: ["Direct", "Referral", "Social"], datasets: [{ data: [55, 30, 15], backgroundColor: ['#4e73df', '#1cc88a', '#36b9cc'], hoverBackgroundColor: ['#2e59d9', '#17a673', '#2c9faf'], hoverBorderColor: "rgba(234, 236, 244, 1)", }], }, options: { maintainAspectRatio: false, tooltips: { backgroundColor: "rgb(255,255,255)", bodyFontColor: "#858796", borderColor: '#dddfeb', borderWidth: 1, xPadding: 15, yPadding: 15, displayColors: false, caretPadding: 10, }, legend: { display: false }, cutoutPercentage: 80, }, }); Quiero reemplazar los datos de muestra: [55, 30, 15] con mis propios mydata . Cuando lo cambio en mi archivo chart-pie-demo.js , el gráfico no aparece. ¿Necesito vincular la ubicación de los datos en el archivo chart-pie-demo.js ?
Ya mencionaste el uso de pandas; es por eso que suponga que ya puede agregar los nombres. Para la parte de django: necesitará una vista similar a esta:
def your_view(request): data = "[10, 20, 30]" # however your aggreated output will look. # for simplicity of this example I assume it as a string like that # you can pass variables to djangos frontend using context context = {'my_data': data} return render(request, 'index.html', context)Entonces, básicamente, puede poner sus datos solo en un contexto ordinario de django. Si su js es tan corto y desea una respuesta rápida y fácil, sería mejor eliminar el archivo js y colocar el código directamente en una etiqueta de secuencia de comandos en su html (asumí "index.html" por ejemplo aquí).
Luego puede ingresar a su etiqueta de secuencia de comandos y:
var ctx = document.getElementById("myPieChart"); var myPieChart = new Chart(ctx, { type: 'doughnut', data: { labels: ["Direct", "Referral", "Social"], datasets: [{ data: {{ data }} , ...En general, la idea básica en django es: creas una vista. Creas una URL que apunta a la vista. La vista representa un archivo HTML (o bien, un "archivo" en general; los archivos de Word y otros archivos también funcionan). "Renderizaciones" básicamente significa realizar funciones de plantilla y poner los valores que le dio en contexto en los nombres de variables correspondientes escritos entre corchetes dobles.
Después de eso se sirve el archivo. Lo que significa que cualquier cosa que haga en la plantilla se ejecuta antes de que se ejecute javascript porque el servidor crea el archivo usando etiquetas de plantilla y justo después de eso se envía al navegador que luego ejecuta javascript. Para su ejemplo, podría crear una imagen del contexto de django y de las etiquetas de plantilla simplemente como un básico "usar lo que ponga en esta variable para reemplazarlo en mi archivo html/css/js/lo que sea".
Eso significa que también podrías hacer:
def your_view(request): context = { 'data_one': 10 'data_two': 20 'data_three': 30 } return render(request, 'index.html', context)y, en consecuencia:
var ctx = document.getElementById("myPieChart"); var myPieChart = new Chart(ctx, { type: 'doughnut', data: { labels: ["Direct", "Referral", "Social"], datasets: [{ data: [{{ data_one }}, {{ data_two }}, {{ data_three }}], ...