django+chart.js:无法在具有适当数据的同一图表上获得两个条形图



我对javascript还很陌生,无法使用条形图进行锻炼。问题似乎存在于图表3的数据部分。我不知道如何组织这两个语句以获得正确的数据。我真的尽了一切努力来在酒吧里并排显示这两个值,但似乎没有什么能做到。有人发现我错在哪里了吗?

数据:

{'supplier : "ARAGON", average_service_level_implied:-9.24, average_service_level_optimal: 0.495}

view.py

@method_decorator(login_required, name='dispatch')
class SupplierPage(LoginRequiredMixin,APIView):
def get(self, request, *args, **kwargs):
query = request.GET.get('search_ress', None)
context = {}
if query and request.method == 'GET':
Supplier = supplier.objects.filter(supplier = query)
context.update({'Supplier': Supplier})

return render(request, 'Supplier.html',context)

和chart.js图形

<script>
$(document).ready(function() {
var endpoint = 'items.html'
var forecastdata = []
var reference = []

;
$.ajax({
method: "GET",
url: endpoint,
success: function (data) {

reference = data.reference
forecastdata = data.forecastdata

setChart()
},
error: function (error_data) {
console.log(error_data)
}
}
)
function setChart() {
var ctx = document.getElementById('myChart3').getContext('2d');
var myChart3 = new Chart(ctx3, {
type: 'bar',
data: {
labels: ["actual service level", "optimal service level"],
datasets: [{
label: 'Service level analytics',
data: [
{% for dr in reference %}{{ dr.niveau_service_implicite}}, {% endfor %},

{% for dr in reference %}{{ dr.niveau_service_optimal}}, {% endfor %}
],

backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}],
options: {
scales: {
type: 'linear',
position: 'bottom',
xAxes: [{maxBarThickness: 10}],
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
}
})

可以尝试使用setChart((函数传递条的2个值,如下所示:

function setChart(d1,d2) { 
...
data [ d1 , d2 ]

并且可以在调用函数时提取值:

reference = data.reference
forecastdata = data.forecastdata
d1 = ...
d2 = ...
setChart(d1,d2)

最新更新