嗨,我正在尝试将新数据添加到DB中,而不刷新页面。我正在使用这个库chartjs-plugin-streaming实时传输数据。
我已经尝试过用ajax回调到URL,直到视图被调用 我的视图进入我的模型模板。
view.py
def live(request):
queryset = Registro.objects.all()
if request.GET.get('ensayo__exact') is not None:
queryset = queryset.filter(ensayo__exact=request.GET.get('ensayo__exact'))
if request.GET.get('presion') is not None:
queryset = queryset.filter(presion=request.GET.get('presion'))
if request.GET.get('etapa') is not None:
queryset = queryset.filter(etapa=request.GET.get('etapa'))
if request.GET.get('fecha__gte') is not None:
queryset = queryset.filter(fecha__gte=request.GET.get('fecha__gte'))
if request.GET.get('fecha__lte') is not None:
queryset = queryset.filter(fecha__lte=request.GET.get('fecha__lte'))
presion = [str(obj.presion) for obj in queryset]
etapa = [str(obj.etapa) for obj in queryset]
tempin = [str(obj.tempin) for obj in queryset]
fecha = [str(obj.fecha) for obj in queryset]
fecha__gte = [str(obj.fecha) for obj in queryset]
fecha__lte = [str(obj.fecha) for obj in queryset]
id = [int(obj.id) for obj in queryset]
ensayo_id = [int(obj.ensayo_id) for obj in queryset]
context = {
'presion': json.dumps(presion),
'etapa': json.dumps(etapa),
'tempin': json.dumps(tempin),
'fecha': json.dumps(fecha),
'fecha__get': json.dumps(fecha),
'fecha__lte': json.dumps(fecha),
'id': json.dumps(id),
'ensayo_id': json.dumps(ensayo_id)
}
return render(request, 'reporte/live_data.html', context)
这是我在临时模板和呈现li的画布中尝试过的js函数:
template.html
function update() {
$.get('', '', function() {
return presion = JSON.parse('{{ presion|safe }}')
});
}
function onRefresh(chart) {
chart.config.data.datasets.forEach(function(dataset) {
dataset.data.push({
x: Date.now(),
y: update(),
});
});
}
var color = Chart.helpers.color;
var config = {
type: 'line',
data: {
labels: fecha,
datasets: [{
label: 'Presión (Bar)',
backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
borderColor: window.chartColors.blue,
data: presion,
fill: true,
}]
},
options: {
title: {
display: true,
text: 'Line chart (hotizontal scroll) sample'
},
scales: {
xAxes: [{
type: 'realtime',
realtime: {
duration: 20000,
refresh: 1000,
delay: 2000,
onRefresh: onRefresh
}
}],
yAxes: [{
scaleLabel: {
display: true,
labelString: 'value'
}
}]
},
tooltips: {
mode: 'nearest',
intersect: false
},
hover: {
mode: 'nearest',
intersect: false
}
}
};
有什么想法或帮助吗?