ChartJS Charts.js -仅显示最后一个值的数据标签

0mkxixxg  于 2022-11-07  发布在  Chart.js
关注(0)|答案(3)|浏览(435)

我有一个用charts.js创建的折线图,我想只显示x轴最后一个值的数据标签。这意味着我想显示所有数据点,但只显示最后一个数据点的数据标签。
例如:

我可以使用以下答案显示所有数据集的每个点的数据标签:Show values on top of bars in chart.js但我的目标是只显示最后一个数据点的1个标签,我在这里有点迷失。
这里是codepen link
第一个
有人能帮我吗?

kq0g1dla

kq0g1dla1#

这可以通过DataLabels Plugin来实现。

将JS文件添加到HTML中:

  1. <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@0.7.0"></script>
  • 注意:请确保将其添加到Chart.js脚本include下面。*
    启用数据标签插件并将自定义标签格式化程序添加到选项配置对象:
  1. plugins: {
  2. datalabels: {
  3. formatter: function(value, context) {
  4. if (context.dataIndex === context.dataset.data.length - 1)
  5. {
  6. return value.y;
  7. }
  8. return "";
  9. }
  10. },
  11. }
展开查看全部
bsxbgnwa

bsxbgnwa2#

使用DataLabels Plugin,正如@chuck在其中一条评论中指出的那样。display是要走的路。

  1. plugins: {
  2. datalabels: {
  3. display: function(value, context) {
  4. return context.dataIndex === context.dataset.data.length - 1;
  5. }
  6. },
  7. }
qnakjoqk

qnakjoqk3#

要只显示最后一个点,您可以取消设置不需要的数据(json数组)。
为此,(不知道您得到的是什么类型的数据源)遍历数组并使用

  1. unset($my_var["key_of_value_to_delete"]);

普通阵列:

  1. delete array[0];

最好的办法是:只检索你真正需要的数据。发送你的服务器请求的方式,你只得到你真正需要的结果。关键词:
查询和筛选

相关问题