Django с chartjs > 2.9.3

Я использую версию Django==5.0.6 и пытаюсь интегрировать графики с помощью chartjs и плагина datalabels.

Когда я использую графики, они рендерятся без проблем, но я не могу увидеть ни одной метки данных.

Если я пытаюсь добавить Chart.register(ChartDataLabels); график больше не отображается. Я также пробовал Chart.plugins.register(ChartDataLabels);

Я хотел бы иметь возможность использовать самую последнюю версию chartjs, но когда я меняю версию графика на любую другую, кроме 2.9.3, графики не отображаются.

base.html

<!DOCTYPE html>
<html>
    {% load static %} 
    {% load django_bootstrap5 %}
    {% bootstrap_css %}
    {% bootstrap_javascript %}

  <head>
    <title>{{ template_data.title }}</title>

    <link rel=
      "stylesheet"  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
    
<link href=
      "https://fonts.googleapis.com/
      css2?family=Poppins:wght@300;400;500;600;700&display=
      swap" rel="stylesheet">

    <link rel="stylesheet" type="text/css"
    href="{% static 'css/style.css' %}">

    <meta name="viewport" content="width=device-width,
      initial-scale=1" />
      
      <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3"></script> 
      <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0-rc"></script>
  </head>
...

data.html

{% extends "base.html" %}
{% load django_tables2 %}

{% block head %}
  <p><h3>Job data</h3>{{year}}</p>
{% endblock head %}

{% block content %}

<canvas id="chart" style="position: relative; height:100vh; width:100vw"></canvas>

<script>
      
      let ctx = document.getElementById("chart").getContext('2d');
      /* Chart.register(ChartDataLabels); Chart.plugins.register(ChartDataLabels); */
      let chart = new Chart(ctx, {
        type: "horizontalBar",
        
        data: {
           labels: [{% for data in labels %} '{{data}}', {% endfor %}],
           datasets: [
              {
                label: "Job Week 13",
                backgroundColor: "#2d9f42",
                borderColor: "#030202",
                data: [{% for data in week13_count %}{{data}},{% endfor %}],
              },
              {
                label: "Job Day 1",
                backgroundColor: "#fc9003",
                borderColor: "#030202",
                data: [{% for data in job1_count %}{{data}},{% endfor %}],
              },
              {
                  label: "Group",
                  backgroundColor: "#79AEC8",
                  borderColor: "#030202",
                  data: [{% for data in count %}{{data}},{% endfor %}],
              }]            
        },
      
        options: {
          responsive: true,
          title: {
             text: "Job outcome data",
             display: true
          },
          scales: {
             xAxes: [{
               ticks: {
                     beginAtZero:true
                 }
     
             }],
           yAxes: [{ stacked:true}]
           
         },
         plugins: {
          datalabels: {
            align: 'end',
            color: 'red',
        } /* added for simplicity to test */
        }         
     }     
     });    
</script>
{% endblock %}

works with 2.9.3 but can't figure out how to add datalabels

Идеально я хотел бы иметь возможность использовать самую современную, табличную версию chartjs. График рендерится с 2.9.3, но я не могу зарегистрировать datalabels.

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