javascript - 每分钟更新一次高排行榜？

Question

我正在使用 jquery High Charts 来显示我的温度数据。我每分钟都会收到更新的数据，并且图表必须每分钟显示最新的数据(更新)。我可以通过简单地刷新页面来做到这一点，但这不是我想要的方式，还有其他可能的方法吗？

下面您可以看到我的图表、脚本和函数。

<script>

    time={{ time|safe }}
    machine_temp={{ machine_temp|safe }}
    console.log(machine_temp);
    engine_temp={{ engine_temp|safe }}
    $(function () {
    $('#container').highcharts({
        title: {
            text: 'Engine and Machine Temperature',
            x: -20 //center
        },
        subtitle: {
            x: -20
        },
        xAxis: {
            categories: time
        },
        yAxis: {
            title: {
                text: 'Temperature (°C)'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            valueSuffix: '°C'
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0
        },
        series: [{
            name: 'Engine',
            data: machine_temp
        }, {
            name: 'Machine',
            data: engine_temp
        },]
    });
});
</script>

View .py:

def weather_chart_view(request):
     template='graph1.html'
     temperature=Temperature.objects.filter(date=datetime.date.today()).order_by('id')
     time=[]
     machine_temp=[]
     engine_temp=[]
     for temp in temperature:
         time.append(str(temp.Time))
         machine_temp.append(float(temp.machine_temp))
         engine_temp.append(float(temp.engine_temp))
     return render_to_response(template,{'time':time,'machine_temp':machine_temp,'engine_temp':engine_temp},context_instance=RequestContext(request),)

Answer 1

您可以尝试这样的事情:

time={{ time|safe }}
machine_temp={{ machine_temp|safe }}
engine_temp={{ engine_temp|safe }}

function makeChart(elem){
    time={{ time|safe }};
    machine_temp={{ machine_temp|safe }};
    engine_temp={{ engine_temp|safe }};
    $(elem).highcharts({
      // chart code here
    });
}

$(function () {
    setTimeout(function(){
        makeChart("#container"); // recall in 1 min  60 * 1000 = 60000
    }, 60000);
});