Chart.js中的动态数据集过滤器

Question

The image shows the current output but no parameters for the user interaction我有一个chart.js折线图，显示一年的数据。数据来自Django视图（apiview）。我希望用户能够选择一个范围，例如。 1周，1个月等等。

到目前为止，我的观点是：

＆＃13;

＆＃13;

/\D\K\d{0,4}(?:\.(?=\d))?\d{1,4}px/

＆＃13;

＆＃13;

＆＃13;

这是html文件：

＆＃13;

＆＃13;

class AcctReceivableData(APIView):
  def get(self, request, format = None):
    dt = [dates.dt for dates in FirstTest.objects.filter(variable = "Accounts receivable (days)", kpi_category = "Finance")] 
    value = [values.value for values in FirstTest.objects.filter(variable = "Accounts receivable (days)", kpi_category = "Finance")]
    data = {
  "labels": dt,
  "default": value,
}
return Response(data)

＆＃13;

var endpoint = '/client/primarycare/acctreceivable/chart/data/'
var defaultData = []
var target = []
var labels = [];
$.ajax({
    method: "GET",
    url: endpoint,
    success: function(data){
    	labels = data.labels
    	defaultData = data.default
    	target = data.target
    	setChart()
    	
    },
    error: function(error_data){
        console.log("error")
        console.log(error_data)
    }
})
function setChart(){
	var ctx = document.getElementById("myChart").getContext('2d');
	var myChart = new Chart(ctx, {
	    type: 'line',
	    data: {
	        labels: ["January", "February", "March","April","May","June","July", "August","September","October","November","December"],
	        datasets: [{
	            label: '# Actual',
	            data: defaultData,
	            backgroundColor: [
	                'rgba(255, 159, 64, 0.2)'
	            ],
	            borderColor: [
	                'rgba(255, 159, 64, 1)'
	            ],
	            borderWidth: 5,
	            fill: true
	        },
	        {
	            label: '# Target',
	            data: target,
	            backgroundColor: [
	            	'rgba(255, 206, 86, 0.2)'
	            ],
	            borderColor: [
	            	'rgba(255, 206, 86, 1)'
	            ],
	            borderWidth: 1,
	            fill: true
	        }]
	    },
	    options: {
	        scales: {
	            yAxes: [{
	                ticks: {
	                    beginAtZero:true
	                },
	                gridLines: {
	                    display:false
	                }
	            }]
	    ,
	    xAxes: [{
            ticks: {
                beginAtZero:true
            },
            gridLines: {
                display:false
            }
        }]
	        },
	        elements: {
                line: {
                        fill: false
                },
                
	        
            },
            title: {
                display: true,
                text: 'Accounts Receivable by days'
              }
	    
	    }
	});
	
}

＆＃13;

＆＃13;

＆＃13;

我不确定如何处理这个场景。感谢您的帮助。