如何通过Django根据日期过滤chart.js?

时间:2019-12-26 03:56:22

标签: javascript python django chart.js

这是将代码放置到我的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函数的未捕获类型错误?

0 个答案:

没有答案