1 Câu hỏi: Làm cách nào để tạo biểu đồ động với Django và Chart.js?

câu hỏi được tạo ra tại Sat, May 4, 2019 12:00 AM

Tôi đang tạo một trang web và muốn bao gồm một biểu đồ cho thấy sự phát triển của nhiệt độ trong thời gian.

Dữ liệu nhiệt độ được lưu trong cơ sở dữ liệu mỗi giây. Django lấy dữ liệu này và chuyển nó vào mẫu.

Django:

def Dashboard(request):

    temp = Info.objects.using('wings').filter(localisation ='Wing_1').order_by('-time')

    time1 = []
    temperature = []

    for dataset in temp :
        time1.append(dataset.time.strftime("%Hh%M"))
        temperature.append(dataset.temp_wing)

    time1 = time1[:60]
    temperature = temperature[:60]
    time1.reverse()
    temperature.reverse()

    context = {
                'time1': time1,
                'temperature': temperature,
    }
    return render(request, 'Dashboard/dashboard.html',context)

Mẫu:

<!DOCTYPE html>
{% load static %}

<canvas id="myChart" width="400" height="200"></canvas>

<script src="{% static 'Dashboard/js/Chart.min.js' %}"></script>

<script>
var ctx = document.getElementById('myChart').getContext('2d');

var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: {{time1|safe}},
        datasets: [
        {label: 'Wing 1 temperature', data : {{temperature|safe}}, backgroundColor:['rgba(54, 162, 235, 0.2)'], borderColor: ['rgba(54, 162, 235, 1)'], borderWidth: 1}
        ]},
    options: {
        scales: { yAxes: [{ ticks: { beginAtZero: false }}]}
        }
    });

ChartUpdate(function(){
  myChart.data.datasets[0].data = {{temperature|safe}};
  myChart.data.labels = {{time1|safe}};
  myChart.update();
}, 5000);

</script>

Biểu đồ được hiển thị đúng với giá trị của cơ sở dữ liệu. Nhưng tôi đã dự kiến ​​rằng hàm ChartUpdate trong mẫu sẽ tự động cập nhật biểu đồ với giá trị mới được lưu trong cơ sở dữ liệu, nhưng dường như nó không hoạt động ...

Có cách nào để tự động cập nhật giá trị của biểu đồ với giá trị mới của cơ sở dữ liệu mà không cần tải lại trang không?

    
1
  1. Bạn đang lưu ý lấy dữ liệu mới từ cơ sở dữ liệu, bạn sẽ cần thực hiện cuộc gọi ajax bên trong chức năng ChartUpdate. Bạn có thể cần triển khai điểm cuối API mới.
    2019-05-04 15: 28: 48Z
1 Câu trả lời                              1                         

Nhờ nhận xét của drec4s, tôi đã có thể giải quyết vấn đề của mình!

Tại đây, tệp xem:

def AutoUpdate(request):

    temp = Info.objects.using('wings').filter(localisation ='Wing_1').order_by('-time')

    time1 = []
    temperature = []

    for dataset in temp :
        time1.append(dataset.time.strftime("%Hh%M"))
        temperature.append(dataset.temp_wing)

    time1 = time1[:60]
    temperature = temperature[:60]
    time1.reverse()
    temperature.reverse()

    context = {
                'time1': time1,
                'temperature': temperature,
    }
    return JsonResponse(context)

Và phần tập lệnh trong mẫu:

setInterval(function(){
    $.ajax({
        url:'/Dashboard/AutoUpdate',
        success: function(test){
            myChart.data.datasets[0].data = test.temperature;
            myChart.data.labels = test.time1;
            myChart.update();
        }
    });
}, 5000);
    
0
2019-05-05 16: 25: 06Z
nguồn đặt đây
Những câu hỏi khác