Chartjs datalabels没有显示在柱状图上的标签。

huangapple go评论143阅读模式
英文:

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 = [
    {
        &quot;date&quot;: &quot;2023-02-23&quot;,
        &quot;subscribers&quot;: 1208123
    },
    {
        &quot;date&quot;: &quot;2023-02-22&quot;,
        &quot;subscribers&quot;: 1045338
    },
    {
        &quot;date&quot;: &quot;2023-02-21&quot;,
        &quot;subscribers&quot;: 1043130
    },
    {
        &quot;date&quot;: &quot;2023-02-20&quot;,
        &quot;subscribers&quot;: 1248035
    },
    {
        &quot;date&quot;: &quot;2023-02-19&quot;,
        &quot;subscribers&quot;: 1243734
    },
    {
        &quot;date&quot;: &quot;2023-02-18&quot;,
        &quot;subscribers&quot;: 1240317
    },
    {
        &quot;date&quot;: &quot;2023-02-17&quot;,
        &quot;subscribers&quot;: 1033439
    },
    {
        &quot;date&quot;: &quot;2023-02-16&quot;,
        &quot;subscribers&quot;: 974864
    }
];
  const chart_label = &quot;Number of subscribers&quot;;

 const chart_canvas = document
      .getElementById(&quot;number_of_messages_delivered&quot;)
      .getContext(&quot;2d&quot;);
    Chart.defaults.set(&quot;plugins.datalabels&quot;, {
      color: &quot;#FE777B&quot;,
    });
    push_messages_chart = new Chart(chart_canvas, {
      type: &quot;bar&quot;,
      options: {
        animation: true,
        plugins: {
          // Change options for ALL labels of THIS CHART
          datalabels: {
            color: &quot;#FFCE56&quot;,
            display: true, // Set to true to display the labels
          },
        },
      },
      data: {
        labels: data.map((row) =&gt; row.date),
        datasets: [
          {
            label: chart_label,
            data: data.map((row) =&gt; row.subscribers),
          },
        ],
      },
    });

<!-- language: lang-html -->

&lt;script src=&quot;https://cdn.jsdelivr.net/npm/chart.js@3.0.0/dist/chart.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.2.0/chartjs-plugin-datalabels.min.js&quot;&gt;&lt;/script&gt;
&lt;canvas id=&quot;number_of_messages_delivered&quot;&gt;&lt;/canvas&gt;

<!-- 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 the datalabels should be inside the labels.value object. I've moved that so the labels are the correct color (#FFCE56)

  • The color on the dataset should be backgroundColor, 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 the datalabels should be inside the labels.value object. I've moved that so the lables are the correct color (#FFCE56)

  • The color on the dataset should be backgroundColor, 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 =&gt; numberWithCommas(n),
    

Updated Snippet

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const data = [{&quot;date&quot;: &quot;2023-02-23&quot;, &quot;subscribers&quot;: 1208123 }, {&quot;date&quot;: &quot;2023-02-22&quot;, &quot;subscribers&quot;: 1045338 }, {&quot;date&quot;: &quot;2023-02-21&quot;, &quot;subscribers&quot;: 1043130 }, {&quot;date&quot;: &quot;2023-02-20&quot;, &quot;subscribers&quot;: 1248035 }, {&quot;date&quot;: &quot;2023-02-19&quot;, &quot;subscribers&quot;: 1243734 }, {&quot;date&quot;: &quot;2023-02-18&quot;, &quot;subscribers&quot;: 1240317 }, {&quot;date&quot;: &quot;2023-02-17&quot;, &quot;subscribers&quot;: 1033439 }, {&quot;date&quot;: &quot;2023-02-16&quot;, &quot;subscribers&quot;: 974864 } ]; 
const chart_label = &quot;Number of subscribers&quot;;
Chart.register(ChartDataLabels); // Enable plugin
const chart_canvas = document
.getElementById(&quot;number_of_messages_delivered&quot;)
.getContext(&quot;2d&quot;);
push_messages_chart = new Chart(chart_canvas, {
type: &quot;bar&quot;,
options: {
animation: true,
plugins: {
// Change options for ALL labels of THIS CHART
datalabels: {
formatter: n =&gt; numberWithCommas(n),
display: true, // Set to true to display the labels
labels: {
value: {
color: &quot;#FFCE56&quot;
}
} 
}
},
},
data: {
labels: data.map((row) =&gt; row.date),
datasets: [
{
label: chart_label,
data: data.map((row) =&gt; row.subscribers),
backgroundColor: &quot;#FE777B&quot;,
},
],
},
});
function numberWithCommas(x) {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, &quot;,&quot;);
}

<!-- language: lang-html -->

&lt;script src=&quot;https://cdn.jsdelivr.net/npm/chart.js@3.0.0/dist/chart.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.2.0/chartjs-plugin-datalabels.min.js&quot;&gt;&lt;/script&gt;
&lt;canvas id=&quot;number_of_messages_delivered&quot;&gt;&lt;/canvas&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年2月23日 22:56:49
  • 转载请务必保留本文链接:https://go.coder-hub.com/75546523.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定