我正在使用Django 2.0进行BPO网站的后端开发。在该示例中，我试图在一个表中显示一个组织的会计信息（跟踪余额），并在贷方和借方帐户中显示两个单独的折线图。我正在使用Chart.js绘制折线图。 django的view.py文件中的相应功能是：
#this preprocess function is used to find out the credit and debit accounts
def preprocess(a):
label1 = []
label2 = []
arr1 = []
arr2 = []
for i in range(len(a)):
if int(a[i,1])!=0:
label1.append(a[i,0])
arr1.append(int(a[i,1]))
else:
label2.append(a[i,0])
arr2.append(int(a[i,2]))
return label1,label2,list(arr1),list(arr2)
@login_required
def Acc_Info(request):
obj = request.user
if(request.method=='GET'):
obj1 = Company.objects.get(username=obj)
dt = int(datetime.date.today().year)
obj2 = AccountingInfo.objects.filter(company_code=obj1,date=dt)
if obj2.exists():
obj2 = AccountingInfo.objects.get(company_code=obj1,date=dt)
path = settings.MEDIA_ROOT+'/'+str(obj2.info)
# names = ['Name of Account','Credit','Debit']
data = pd.read_csv(path)
data = np.array(data)
# dr = list(data[:,1])
# cr = list(data[:,2])
label1,label2,dr,cr = preprocess(data)
print("\n\ncr = ",cr)
print("\n\ndr = ",dr)
Debit_sum = data[:,1].sum(dtype=np.float64)
Credit_sum = data[:,2].sum(dtype=np.float64)
return render(request,'Acc_Info.html',{'f':True,'lc':len(cr),'lr':len(dr),'label1':label1,'label2':label2,'cr':cr,'dr':dr,'year':datetime.date.today().year,'data':data,'Suspense':Credit_sum-Debit_sum,'Credit_sum':Credit_sum,'Debit_sum':Debit_sum})
else:
return render(request,'Acc_Info.html',{'f':False,'year':dt})
else:
obj1 = Company.objects.get(username=obj)
dt = request.POST['year']
obj2 = AccountingInfo.objects.filter(company_code=obj1,date=dt)
if obj2.exists():
obj2 = AccountingInfo.objects.get(company_code=obj1,date=dt)
path = settings.MEDIA_ROOT+'/'+str(obj2.info)
data = pd.read_csv(path)
data = np.array(data)
label1,label2,dr,cr = preprocess(data)
print("\n\ncr = ",cr)
print("\n\ndr = ",dr)
Credit_sum = data[:,2].sum(dtype=np.float64)
Debit_sum = data[:,1].sum(dtype=np.float64)
return render(request,'Acc_Info.html',{'f':True,'lc':len(cr),'lr':len(dr),'label1':label1,'label2':label2,'cr':cr,'dr':dr,'year':dt,'data':data,'Suspense':Credit_sum-Debit_sum,'Credit_sum':Credit_sum,'Debit_sum':Debit_sum})
else:
return render(request,'Acc_Info.html',{'f':False,'year':dt})
return redirect('/HRO/log_in/')
我的HTML文件如下：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js" integrity="sha256-oSgtFCCmHWRPQ/JmR4OoZ3Xke1Pw4v50uh6pLcu+fIc=" crossorigin="anonymous"></script>
<title>
Accounting Information
</title>
</head>
<body>
<div class="text-center">
<h2>Select Year for Checking the particular Account Information of that year</h2>
</div><br><br>
<div class="text-center">
<form method="post">
{% csrf_token %}
<label>Year: </label>
<select id="year" name="year"></select>
<button type="submit" class="btn btn-primary">Submit</button>
</form><br>
</div>
<script type="text/javascript">
var start = 2000;
var end = new Date().getFullYear();
var options = "";
for(var year = start ; year <=end; year++){
options += "<option>"+ year +"</option>";
}
document.getElementById("year").innerHTML = options;
</script>
<div class="container">
<h2>Accounting Information for the Year: {{ year }}</h2>
{% if f %}
<table class="table table-hover table-stripe">
<thead><tr>
<th>NAME OF ACCOUNT</th>
<th>DEBIT</th>
<th>CREDIT</th>
</tr>
</thead>
<tbody>
{% for value in data %}
<tr>
{% for any in value %}
<td>{{ any }}</td>
{% endfor %}
</tr>
{% endfor %}
<tr>
<td><strong>Total:</strong></td>
<td>{{ Dredit_sum }}</td>
<td>{{ Crebit_sum }}</td>
</tr>
</tbody>
</table>
<label>Suspense Account: {{ Suspense }}</label>
</div>
<canvas id="myChart1" width="400" height="400" class="col-md-4 offset-md-10"></canvas>
<canvas id="myChart2" width="400" height="400" class="col-md-4 offset-md-10"></canvas>
</body>
{% else %}
<h1>It Seems you have not uploaded Account Information for the chosen year</h1><br>
{% endif %}
<script type="text/javascript">
//if({{ f }})
//{
var ctx = document.getElementById("myChart1").getContext('2d');
var ctx2 = document.getElementById("myChart2").getContext('2d');
// var backgroundColor1 = []
// var backgroundColor2 = []
// var border1 = []
// var border2 = []
// for(var i=0;i<{{ ld }};i++)
// {
// backgroundColor1.push('rgba(255, 99, 132, 0.5)');
// border1.push('rgba(255,99,132,1)');
// }
// for(var i=0;i<{{ lc }};i++)
// {
// backgroundColor2.push('rgba(132, 99, 255, 0.5)');
// border2.push('rgba(132,99,255,1)');
// }
var myChart = new Chart(ctx, {
type: 'line',
data: {
datasets: [{
label: 'Debit Accounts',
data: {{ dr }},
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
},
responsive: false
}
});
var myChart2 = new Chart(ctx2, {
type: 'line',
data: {
datasets: [{
label: 'Credit Accounts',
data: {{ cr }},
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
},
responsive: false
}
});
//}
</script>
</html>
我有2个问题： 1.为什么只绘制前两个数据点 2.如何在Chart.js图表中设置默认颜色，因为此Chart.js版本不支持'fillColor'方法
屏幕显示如下： The accounting info in table( it is appearing properly)
图表如下： The line charts( Only two points are appearing)
P.S。如果我得到一些迅速的答案，这将非常有帮助，因为我有一个要提交的项目。预先谢谢您：）。
