这是将代码放置到我的api端点上的代码:
class ChartData(APIView):
authentication_classes = [SessionAuthentication, BasicAuthentication]
permission_classes = [IsAuthenticated]
def get(self, request, format=None):
current_user = request.user
print(current_user.id)
sales_rev_data = Sales_project.objects.values_list('sales_project_est_rev').filter(sales_project_status = 'p4').filter(sales_extras = current_user.id)
sales_project_closing_date_data = Sales_project.objects.values_list('sales_project_closing_date').filter(sales_project_status = 'p4')
cost_data_per_unit = Sales_project.objects.values_list('material_costs').filter(sales_project_status = 'p4').filter(sales_extras = current_user.id)
moq_data = Customer_requirement.objects.values_list('moq').filter(sales_project__sales_project_status__contains= 'p4')
cost_data = np.array(list(moq_data)) * np.array(list(cost_data_per_unit))
profit_data = np.array(list(sales_rev_data))- cost_data
data = {
"sales_rev": sales_rev_data,
"sales_time_axis": sales_project_closing_date_data,
"profit_data_per_project": profit_data
}
return Response(data)
以下是呈现图表的代码:
<script type="text/javascript">
endpoint = 'api/chart/data'
$.ajax({
type: "GET",
url: endpoint,
success: function(data){
sales_time = data.sales_time_axis
sales_rev = data.sales_rev
profit_data_per_project= data.profit_data_per_project
var ctx = document.getElementById('myChart').getContext('2d');
var ctx2 = document.getElementById('myChart2').getContext('2d');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels:sales_time,
datasets: [{
label: sales_time,
data: profit_data_per_project,
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: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
var myChart2 = new Chart(ctx2, {
type: 'line',
data: {
labels: sales_time,
datasets: [{
label: sales_time,
data: sales_rev,
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: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
},
error: function(error_data){
console.log('error')
console.log(error_data)
}
})
我的目的是根据下拉菜单中选择的选项应用过滤器。
这是我的尝试。
html:
<div class="card-body" id="card_body">
<select class="text_select" id="chart-select" onchange="applyFilter(value, myChart)" name="select">
<option value="All">All Time</option>
<option value="3">Last 3 Months</option>
<option value="6">Last 6 Months</option>
<option value="12">Last Year</option>
<option value="24">Last 2 Years</option>
</select>
<canvas id="myChart"></canvas>
</div>
然后调用:(基本上,我可以测试这段代码是否有效)
function applyFilter(value, chart){
if (value == '3'){
console.log(sales_time);
sales_time.splice(-1,1);
console.log(sales_time);
} ;
chart.update()
return sales_time
}
这是显示在我的控制台中的消息:
(index):301 (4) [Array(1), Array(1), Array(1), Array(1)]
(index):303 (3) [Array(1), Array(1), Array(1)]
(index):305 Uncaught TypeError: chart.update is not a function
at applyFilter ((index):305)
at HTMLSelectElement.onchange ((index):64)
因此,我有2个问题: 1.我的数据过滤方法在逻辑上是否正确?有没有更简单,更直观的方法来过滤图表? 2.为什么我会收到chart.update不是htmlselectelement.onchange函数的未捕获类型错误?