Chart.js отображает сообщение об отсутствии данных с помощью django

У меня есть круговая диаграмма, которую я хочу отобразить сообщение об отсутствии данных, когда нет данных, которые должны быть показаны. Я пробовал методы здесь , но это, кажется, прекращает отображение диаграммы все вместе, даже когда есть данные. в настоящее время, если нет данных, он показывает NAN% данные, основанные на пользовательских данных из модели. Я также попытался использовать оператор if для части, отображающей Nan%, но оператор if также, похоже, приводит к остановке отображения графика.

JS:

<script>
{% block jquery %}
var endpoint = '/api/chart1'
var defaultData = []
var labels = []
$.ajax({
    methode: "GET",
    url: endpoint,
    success: function(data){
        labels = data.labels
        defaultData = data.default
        setChart1()
    },
    error: function(error_data){
        console.log("error")
        console.log(error_data)
    }
})

function setChart1(){
    var ctx = document.getElementById('myChart').getContext('2d');
    Chart.register(ChartDataLabels);
    var myChart = new Chart(ctx, {
        type: 'pie',
        plugins: [ChartDataLabels],
        data: {
            labels: labels,
            datasets: [{
                label: '',
                data: defaultData,
                backgroundColor: [
                    'rgba(255, 51, 51, 0.2)',
                    'rgba(255, 255, 0, 0.2)',
                    'rgba(0, 204, 204, 0.2)',
                ],
                borderColor: [
                    'rgba(255, 51, 51, 1)',
                    'rgba(204, 204, 0, 1)',
                    'rgba(0, 204, 204, 1)',
                ],
                borderWidth: 1
            }]
        },
        options: {
            plugins: {
                tooltip: {
                    enabled: false
                },
                datalabels: {
                    anchor: 'center',
                    align: 'center',
                    formatter: (value, ctx) => {
                        let sum = 0;
                        let dataArr = ctx.chart.data.datasets[0].data;
                        dataArr.map(data => {
                            sum += data;
                        });
                        let percentage = (value*100 / sum).toFixed(2)+"%";
                        return percentage;
                    },
                    color: '#000',
                }
            }
        }
    });
}

{% endblock %}
</script>

HTML:

<div class="card bg-light mb-4">
                <div class="card-header">
                    Assigned Tickets-By Priority
                </div>
                <div class="card-body">
                    <canvas id="myChart" width="400" height="400" ></canvas>
                </div>
            </div>

Вид:

def get_chart1(request):
highTickets = Issue.objects.filter(Q(priority='High') & Q(assigned_users=request.user)).count()
lowTickets = Issue.objects.filter(Q(priority='Low') & Q(assigned_users=request.user)).count()
medTickets = Issue.objects.filter(Q(priority='Medium') & Q(assigned_users=request.user)).count()

labels = ['High', 'Med', 'Low']
default = [highTickets, medTickets, lowTickets]
data = {
    'labels': labels,
    'default': default,
}
return JsonResponse(data)

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