Chartjs datalabels 未在条形图上显示标签

Question

我有一个通过 chartjs 构建的垂直条形图。我正在使用数据标签插件，我希望数据绘制在每个条上，但它不可见

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),
          },
        ],
      },
    });

<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

自上周以来我尝试了不同的迭代，但没有任何效果。这只是我尝试过的随机样本

Answer 1

你忘了初始化插件！

添加这个：

Chart.register(ChartDataLabels);

---

一些额外的信息/改进

• color

  的

  datalabels

  应该在

  labels.value

  对象里面。我已经移动了，所以标签是正确的颜色（

  #FFCE56

  ）

• color

  上的

  dataset

  应该是

  backgroundColor

  ，也改了

• 我已经在标签上实现了一个

  formatter

  ，使用这个问题关于如何应用千位分隔符，只是为了使其更具可读性（再次）。

  formatter: n => numberWithCommas(n),
  

---

更新的片段

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/[email protected]/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>