Как сохранить асинхронную функцию fetchData() и вставить ее в chart.js?

Моя цель - использовать json данные в качестве меток и данных в моем Chart.js piechart.

У меня есть запрос, который получает данные и конвертирует их в Json в view.py:

def get_data(request):
    filtered_transaction_query_by_user = 
    Transaction.objects.filter(portfolio__user=request.user)
    total_transactions_by_user =  
    filtered_transaction_query_by_user.values('coin__name').annotate( total = (Sum('trade_price') * Sum('number_of_coins'))).order_by('-total')
    data = list(total_transactions_by_user)
    return JsonResponse(data,safe=False)

Результат на http://127.0.0.1:8000/get_data/:

[{"coin__name": "Bitcoin", "total": "1220"}, {"coin__name": "Ripple", "total": "160"}]

В файле piechart.html, я нахожу его в < scripts >:

async function fetchData() {
    const url = 'http://127.0.0.1:8000/get_data/';
    const response = await fetch(url)
    // wait until the request has been completed
    const datapoints = await response.json();
    console.log(datapoints);
    return datapoints;}

Наконец, я вызываю функцию , но не вижу как вставить метки и данные в пьечарт:

fetchData()

var ctx = document.getElementById("myPieChart");
var myPieChart = new Chart(ctx, {
type: 'doughnut',
data: {
labels: ['example','example2'], // insert here
datasets: [{
  data: [45,55], //insert here
  backgroundColor: ['#4e73df', '#1cc88a', '#36b9cc'],
  hoverBackgroundColor: ['#2e59d9', '#17a673', '#2c9faf'],
  hoverBorderColor: "rgba(234, 236, 244, 1)",
}],

Вернуться на верх