I'm using version Django==5.0.6 and attempting in integrate charts using chartjs and plugin datalabels.
When I use the charts render without issue, but I'm not able to see any datalabels.
If I try to add Chart.register(ChartDataLabels); the graph no longer renders. I've also tried Chart.plugins.register(ChartDataLabels);
I'd like to be able to use the most updated version of chartjs but when I change the chart version to anything other than 2.9.3, the graphs don't render.
base.html
<!DOCTYPE html>
<html>
{% load static %}
{% load django_bootstrap5 %}
{% bootstrap_css %}
{% bootstrap_javascript %}
<head>
<title>{{ template_data.title }}</title>
<link rel=
"stylesheet" href=".1.1/css/all.min.css">
<link href=
"/
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="/[email protected]"></script>
<script src="/[email protected]"></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 %}
Ideally I'd like to be able to use the most up to date,s table version of chartjs. The graph renders with 2.9.3, but I can't register datalabels.
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744149722a4560590.html
评论列表（0条）