Вот мой код для размещения кода на моей конечной точке 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) 

Вот код для рендеринга графиков:

 {amp}lt;script type="text/javascript"{amp}gt; 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:

  {amp}lt;div class="card-body" id="card_body"{amp}gt; {amp}lt;select class="text_select" id="chart-select" onchange="applyFilter(value, myChart)" name="select"{amp}gt; {amp}lt;option value="All"{amp}gt;All Time{amp}lt;/option{amp}gt; {amp}lt;option value="3"{amp}gt;Last 3 Months{amp}lt;/option{amp}gt; {amp}lt;option value="6"{amp}gt;Last 6 Months{amp}lt;/option{amp}gt; {amp}lt;option value="12"{amp}gt;Last Year{amp}lt;/option{amp}gt; {amp}lt;option value="24"{amp}gt;Last 2 Years{amp}lt;/option{amp}gt; {amp}lt;/select{amp}gt; {amp}lt;canvas id="myChart"{amp}gt;{amp}lt;/canvas{amp}gt; {amp}lt;/div{amp}gt; 

Затем он вызывает: (этот код в основном я проверяю, работает ли этот поток)

 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?