英文:
Chartjs datalabels is not showing the labels on the bar chart
问题
我使用了chartjs构建了一个垂直条形图。我正在使用datalabels插件,我期望数据被绘制在每个条上,但它并不可见。
const data = [
{
"date": "2023-02-23",
"subscribers": 1208123
},
// ...(后续数据省略)
];
const chart_label = "订阅者数量";
const chart_canvas = document
.getElementById("number_of_messages_delivered")
.getContext("2d");
Chart.defaults.set("plugins.datalabels", {
color: "#FE777B",
});
push_messages_chart = new Chart(chart_canvas, {
type: "bar",
options: {
animation: true,
plugins: {
// Change options for ALL labels of THIS CHART
datalabels: {
color: "#FFCE56",
display: true, // 设置为true以显示标签
},
},
},
data: {
labels: data.map((row) => row.date),
datasets: [
{
label: chart_label,
data: data.map((row) => row.subscribers),
},
],
},
});
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.0.0/dist/chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.2.0/chartjs-plugin-datalabels.min.js"></script>
<canvas id="number_of_messages_delivered"></canvas>
我在上周尝试了不同的迭代,但都没有奏效。这只是我尝试过的随机示例之一。
英文:
I have a vertical bar chart built via chartjs. I'm using the datalabels plugin, I expect the data to be plotted on each bar but it's not visible
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const data = [
{
"date": "2023-02-23",
"subscribers": 1208123
},
{
"date": "2023-02-22",
"subscribers": 1045338
},
{
"date": "2023-02-21",
"subscribers": 1043130
},
{
"date": "2023-02-20",
"subscribers": 1248035
},
{
"date": "2023-02-19",
"subscribers": 1243734
},
{
"date": "2023-02-18",
"subscribers": 1240317
},
{
"date": "2023-02-17",
"subscribers": 1033439
},
{
"date": "2023-02-16",
"subscribers": 974864
}
];
const chart_label = "Number of subscribers";
const chart_canvas = document
.getElementById("number_of_messages_delivered")
.getContext("2d");
Chart.defaults.set("plugins.datalabels", {
color: "#FE777B",
});
push_messages_chart = new Chart(chart_canvas, {
type: "bar",
options: {
animation: true,
plugins: {
// Change options for ALL labels of THIS CHART
datalabels: {
color: "#FFCE56",
display: true, // Set to true to display the labels
},
},
},
data: {
labels: data.map((row) => row.date),
datasets: [
{
label: chart_label,
data: data.map((row) => row.subscribers),
},
],
},
});
<!-- language: lang-html -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.0.0/dist/chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.2.0/chartjs-plugin-datalabels.min.js"></script>
<canvas id="number_of_messages_delivered"></canvas>
<!-- end snippet -->
I tried different iterations since last week, but nothing worked. This is just a random sample of what I've tried
答案1
得分: 1
You forgot to initialize the plugin!
Add this:
Chart.register(ChartDataLabels);
Some additional info / improvements
-
The
color
of thedatalabels
should be inside thelabels.value
object. I've moved that so the labels are the correct color (#FFCE56
) -
The
color
on thedataset
should bebackgroundColor
, changed that as well -
I've implemented a
formatter
on the label with the use of this question on how to apply thousand separators, just to make it more readable (again).formatter: n => numberWithCommas(n),
Updated Snippet
const data = [{"date": "2023-02-23", "subscribers": 1208123 }, {"date": "2023-02-22", "subscribers": 1045338 }, {"date": "2023-02-21", "subscribers": 1043130 }, {"date": "2023-02-20", "subscribers": 1248035 }, {"date": "2023-02-19", "subscribers": 1243734 }, {"date": "2023-02-18", "subscribers": 1240317 }, {"date": "2023-02-17", "subscribers": 1033439 }, {"date": "2023-02-16", "subscribers": 974864 } ];
const chart_label = "Number of subscribers";
Chart.register(ChartDataLabels); // Enable plugin
const chart_canvas = document
.getElementById("number_of_messages_delivered")
.getContext("2d");
push_messages_chart = new Chart(chart_canvas, {
type: "bar",
options: {
animation: true,
plugins: {
// Change options for ALL labels of THIS CHART
datalabels: {
formatter: n => numberWithCommas(n),
display: true, // Set to true to display the labels
labels: {
value: {
color: "#FFCE56"
}
}
}
},
},
data: {
labels: data.map((row) => row.date),
datasets: [
{
label: chart_label,
data: data.map((row) => row.subscribers),
backgroundColor: "#FE777B",
},
],
},
});
function numberWithCommas(x) {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.0.0/dist/chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.2.0/chartjs-plugin-datalabels.min.js"></script>
<canvas id="number_of_messages_delivered"></canvas>
英文:
You forgot to initialize the plugin!
Add this:
Chart.register(ChartDataLabels);
Some additional info / improvements
-
The
color
of thedatalabels
should be inside thelabels.value
object. I've moved that so the lables are the correct color (#FFCE56
) -
The
color
on thedataset
should bebackgroundColor
, changed that as well -
I've implemented a
formatter
on the label with the use of this question on how to apply thousand-seperators, just to make it more readable (again).formatter: n => numberWithCommas(n),
Updated Snippet
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const data = [{"date": "2023-02-23", "subscribers": 1208123 }, {"date": "2023-02-22", "subscribers": 1045338 }, {"date": "2023-02-21", "subscribers": 1043130 }, {"date": "2023-02-20", "subscribers": 1248035 }, {"date": "2023-02-19", "subscribers": 1243734 }, {"date": "2023-02-18", "subscribers": 1240317 }, {"date": "2023-02-17", "subscribers": 1033439 }, {"date": "2023-02-16", "subscribers": 974864 } ];
const chart_label = "Number of subscribers";
Chart.register(ChartDataLabels); // Enable plugin
const chart_canvas = document
.getElementById("number_of_messages_delivered")
.getContext("2d");
push_messages_chart = new Chart(chart_canvas, {
type: "bar",
options: {
animation: true,
plugins: {
// Change options for ALL labels of THIS CHART
datalabels: {
formatter: n => numberWithCommas(n),
display: true, // Set to true to display the labels
labels: {
value: {
color: "#FFCE56"
}
}
}
},
},
data: {
labels: data.map((row) => row.date),
datasets: [
{
label: chart_label,
data: data.map((row) => row.subscribers),
backgroundColor: "#FE777B",
},
],
},
});
function numberWithCommas(x) {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
<!-- language: lang-html -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.0.0/dist/chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.2.0/chartjs-plugin-datalabels.min.js"></script>
<canvas id="number_of_messages_delivered"></canvas>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论