我从一位前同事手中接过了一个Django项目，我必须编辑他的代码才能在Google Viz折线图中添加一行。
由于折线图已经存在，我试图尽可能地遵循用于创建它的逻辑（假设我之前从未做过这样的事情）。我将新数据模型添加到models.py，成功迁移了它，并找到了views.py的一部分，在那里他设置了折线图的数据和下面的表格。
我试图复制他在views.py中所做的事情，然后代码似乎从实际创建图表的JavaScript文件中获取。但是，当我使用JavaScript时，似乎根据我在Web控制台日志中看到的内容，从views.py而不是我的对象中识别出他的对象。
在views.py中创建的关键对象是 module_progressjs 。我对新行数据的对象称为 tii_progressjs 。在我看来，a dictionary名为context_dict用于将数据从Python传递到JavaScript，但我复制了这种方法，但似乎没有用。
这是views.py代码的核心。与“模块”一词相关的所有内容都是原始（工作）代码，与“tii”或“将其打开”相关的所有内容都是我添加的部分。这个代码块中的一些可能与表而不是图表有关，但我还不确定，所以我遵循所有这些的逻辑，即使我只编辑图表：
try:
module_attempts = Studentmoduleprogress.objects.values().filter(Person_bnrid = Person_bnrid).annotate(Max('Start_date')).order_by('-Start_date')
turn_it_in = TII.objects.values().filter(Person_bnr_id = Person_bnrid).annotate(Max('Course_start')).order_by('-Course_start')
context_dict['turn_it_in'] = turn_it_in
context_dict['module_attempts'] = module_attempts
tiiavg = TII.objects.values('COURSE_IDENTIFICATION','Course_start').annotate(wk1_avg=Avg('TurnItIn_W01'), wk2_avg=Avg('TurnItIn_W02'),
wk3_avg=Avg('TurnItIn_W03'),wk4_avg=Avg('TurnItIn_W04'),
wk5_avg=Avg('TurnItIn_W05'),wk6_avg=Avg('TurnItIn_W06'),
wk7_avg=Avg('TurnItIn_W07'),wk8_avg=Avg('TurnItIn_W08'),
wk9_avg=Avg('TurnItIn_W09'),wk10_avg=Avg('TurnItIn_W10'),
wk11_avg=Avg('TurnItIn_W11'),wk12_avg=Avg('TurnItIn_W12'))
modavg = Studentmoduleprogress.objects.values('Module_code','Start_date').annotate(wk1_avg=Avg('Week_01'), wk2_avg=Avg('Week_02'),
wk3_avg=Avg('Week_03'),wk4_avg=Avg('Week_04'),
wk5_avg=Avg('Week_05'),wk6_avg=Avg('Week_06'),
wk7_avg=Avg('Week_07'),wk8_avg=Avg('Week_08'),
wk9_avg=Avg('Week_09'),wk10_avg=Avg('Week_10'),
wk11_avg=Avg('Week_11'),wk12_avg=Avg('Week_12'))
#print modavg
context_dict['tiiavg'] = mark_safe(json.dumps(list(tiiavg), cls = DateTimeEncoder))
context_dict['modavg'] = mark_safe(json.dumps(list(modavg), cls = DateTimeEncoder))
module_progress = []
for module in module_attempts:
max_week = module['Module_duration_max']
progress_lst = ['Module_code', module['Module_code'], 'Start_date', module['Start_date'], 'End_date', module['End_date']]
for wk in range(1, max_week + 1):
week = 'Week_' + (str(wk) if wk >= 10 else '0' + str(wk))
progress_lst.append(week)
progress_lst.append(module[week])
module_progress.append(progress_lst)
tii_progress = []
for module in turn_it_in:
max_week = module['Module_duration_max']
progress_lst = ['COURSE_IDENTIFICATION', module['COURSE_IDENTIFICATION'], 'Course_start', module['Course_start'], 'Course_end', module['Course_end']]
for wk in range(1, max_week + 1):
week = 'TurnItIn_W' + (str(wk) if wk >= 10 else '0' + str(wk))
progress_lst.append(week)
progress_lst.append(module[week])
tii_progress.append(progress_lst)
#print module_progress
context_dict['tii_progress'] = tii_progress
context_dict['module_progress'] = module_progress
context_dict['module_progressjs'] = mark_safe(json.dumps(module_progress, cls = DateTimeEncoder))
context_dict['tii_progressjs'] = mark_safe(json.dumps(tii_progress, cls = DateTimeEncoder))
JS如下。为简洁起见，我已删除了前95％的内容，但如果您想查看完整的脚本，请查看编辑历史记录：
// Module Progress
google.charts.setOnLoadCallback(drawModProgress);
$(window).resize(function(){
//google.charts.setOnLoadCallback(drawModProgress);
drawModProgress();
});
function drawModProgress() {
var data = new google.visualization.DataTable();
var selOption = $("#mcode option:selected").val();
var dateOption = $("#sdate option:selected").val();
var modset = {};
var selModule = [];
var selTII= [];
var wks = [];
var posts = [];
var yTicks = [];
var l=0, m=0;
var tii = [];
for(i=0; i < module_progressjs.length; i++)
{
if(module_progressjs[i][1] == selOption)
//if (modset.Module_code == selOption && modset.Start_date == dateOption)
{
selModule[0]= module_progressjs[i];
//console.log(selModule[0]);
}
}
//console.log(tii_progressjs[1]);
//console.log(tii_progressjs);
/*for(ii=0; ii < tii_progressjs.length; ii++)
{
if(tii_progressjs[ii][1] == selOption)
{
selTII[0]= tii_progressjs[ii];
}
}*/
如果我取消注释引用我的tii_progressjs对象的代码，则代码会中断。当我查看日志时，他的对象有数据，但我的数据不存在。
不确定这是否重要，但HTML是：
{% if module_progress %}
<div class="row">
<div class="col-lg-12 col-md-12">
<h3 class="sp-font-bl"> <i class="fa fa-book sp-icon-module" aria-hidden="true"></i> Modules Progression</h3>
<div class="panel panel-default">
<div class="panel-body">
<label id="sp-modsel">Module Code</label>
<select id="mcode" class="selectpicker" >
{% for mod in module_attempts %}
<option value="{{ mod.Module_code }}"> {{ mod.Module_code }} </option>
{% endfor %}
</select>
<div class="container-fluid ">
<div class="row" >
<div class="col-xs-12 col-md-12">
<div id="module_progress" ></div>
</div>
</div>
</div>
<div class="table-responsive">
{% if module_attempts %}
<table id="modules" class="table table-striped table-bordered table-hover">
<thead align="center">
<tr class="sp-td-bg01">
<th>Module Code</th>
<th>Module Name</th>
<th>Start Date</th>
<th>End Date</th>
<th>Module Grade</th>
</tr>
</thead>
<tbody>
{% for module in module_attempts %}
<tr>
<td scope="row"> {{module.Module_code}} </td>
<td> {{module.Module_name}} </td>
<td> {{module.Start_date}} </td>
<td> {{module.End_date}} </td>
<td> {{module.Module_grade}} </td>
</tr>
{% endfor %}
</tbody>
</table>
{% endif %}
</div>
更新：我开始认为缺少的链接是HTML。听起来JS中的document.getelementbyid语句是从HTML DOM中提取信息而我没有向HTML中添加任何内容。
更新2：在HTML模板的末尾看一下这个位，我打赌我应该编辑一下：
<script type="text/javascript">
var studtests = {{ studtests | safe }};
var studobjs = {{ studobjs | safe }};
//var modulesjs = {{ modulesjs | safe }};
var studsumryjs = {{ studsumryjs | safe }};
var module_progressjs = {{ module_progressjs | safe }};
var modavg = {{ modavg | safe }};
</script>
<script src = "{%static 'js/student.js' %}" type="text/javascript">
</script>
{% endblock %}
答案 0 :(得分：1)
答案似乎是你不是直接从views.py转到JS，而是从views.py转到HTML模板，然后在调用脚本时将数据传递给JS
具体来说，我不得不在HTML中更改以下代码块：
<script type="text/javascript">
var studtests = {{ studtests | safe }};
var studobjs = {{ studobjs | safe }};
var studsumryjs = {{ studsumryjs | safe }};
var module_progressjs = {{ module_progressjs | safe }};
var modavg = {{ modavg | safe }};
</script>
<script src = "{%static 'js/student.js' %}" type="text/javascript">
</script>
到
<script type="text/javascript">
var studtests = {{ studtests | safe }};
var studobjs = {{ studobjs | safe }};
var studsumryjs = {{ studsumryjs | safe }};
var module_progressjs = {{ module_progressjs | safe }};
var modavg = {{ modavg | safe }};
var tiiavg = {{ tiiavg | safe }};
var tii_progressjs = {{tii_progressjs | safe}};
</script>
<script src = "{%static 'js/student.js' %}" type="text/javascript">
</script>
然后我能够对JS进行必要的更改，以在图表中包含我想要的额外行。