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

Question

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

例如：

我能够使用这个答案为所有数据集的每个点显示数据标签：Show values on top of bars in chart.js 但我的目标是只显示最后一个数据点的 1 个标签，我在这里有点迷失了。

这里是codepen link

var TITLE = 'Trend Coronavirus per Giorno';

var X_AXIS = '';  // x-axis label and label in tooltip
var Y_AXIS = ''; // y-axis label and label in tooltip

var BEGIN_AT_ZERO = false;  // Should x-axis start from 0? `true` or `false`

var SHOW_GRID = true; // `true` to show the grid, `false` to hide
var SHOW_LEGEND = true; // `true` to show the legend, `false` to hide


$(document).ready(function() {

  // Read data file and create a chart
  $.get('https://localchef.it/csv/trendbyday.csv', function(csvString) {

    var data = Papa.parse(csvString).data;
    var timeLabels = data.slice(1).map(function(row) { return row[0]; });

    var datasets = [];
    for (var i = 1; i < data[0].length; i++) {
      datasets.push(
        {
          label: data[0][i], // column name
          data: data.slice(1).map(function(row) {return row[i]}), // data in that column
          fill: false // `true` for area charts, `false` for regular line charts
        }
      )
    }

    // Get container for the chart
    var ctx = document.getElementById('chart-container').getContext('2d');

    new Chart(ctx, {
      type: 'line',

      data: {
        labels: timeLabels,
        datasets: datasets,
      },

      options: {
        "animation": {
            "duration": 1,
                        "onComplete": function () {
                            var chartInstance = this.chart,
                                ctx = chartInstance.ctx;
                            
                            ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
                            ctx.textAlign = 'center';
                            ctx.textBaseline = 'bottom';

                            this.data.datasets.forEach(function (dataset, i) {
                                var meta = chartInstance.controller.getDatasetMeta(i);
                                meta.data.forEach(function (line) {
                                    var data = dataset.data[1];                            
                                    ctx.fillText(data, line._model.x, line._model.y - 5);
                                });
                            });
                        }
        },
        title: {
          display: true,
          text: TITLE,
          fontSize: 16,
        },

        legend: {
          display: true,
          labels: {
            boxWidth: 15,
          },
        },
        maintainAspectRatio: false,
        scales: {
          xAxes: [{
            scaleLabel: {
              display: X_AXIS !== '',
              labelString: X_AXIS
            },
            gridLines: {
              display: false,
            },
            ticks: {
              callback: function(value, index, values) {
                return value.toLocaleString();
              }
            }
          }],
          yAxes: [{
            beginAtZero: true,
            scaleLabel: {
              display: Y_AXIS !== '',
              labelString: Y_AXIS
            },
            gridLines: {
              display: SHOW_GRID,
            },
            ticks: {
              beginAtZero: BEGIN_AT_ZERO,
              callback: function(value, index, values) {
                return value.toLocaleString()
              }
            }
          }]
        },
        tooltips: {
          displayColors: true,
          mode: 'index',
          intersect: false,
          callbacks: {
            label: function(tooltipItem, all) {
              return all.datasets[tooltipItem.datasetIndex].label
                + ': ' + tooltipItem.yLabel.toLocaleString();
}
          }
        },
        plugins: {
          colorschemes: {
            scheme: 'brewer.Paired12'
          }
        }
      }
    });

  });

});

<!-- Load jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  
<!-- Load Chart.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script>
<script src="https://localchef.it/csv/jscolors.js"></script>

<!-- Load PapaParse to read csv files -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.1.0/papaparse.min.js"></script>
<div>
  <canvas id="chart-container" style="height: 400px; width: 100%"></canvas>
</div>
<script src="script.js"></script>

谁能帮帮我？

Answer 1

这可以通过DataLabels Plugin 来完成。

将 JS 文件添加到您的 HTML：

<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@0.7.0"></script>

注意：一定要把它添加到 Chart.js 脚本的下面。

启用 datalabels 插件并将自定义标签格式化程序添加到选项配置对象：

plugins: {
    datalabels: {
        formatter: function(value, context) {
            if (context.dataIndex === context.dataset.data.length - 1)
            {
                return value.y;
            }
            return "";
        }
    },
}

Answer 2

要仅显示最后一点，您可以取消设置不需要的数据（json 数组）。

为此，（不知道你得到什么样的数据源）循环遍历数组并使用

unset($my_var["key_of_value_to_delete"]);

普通数组：

delete array[0];

最好的办法是：只检索您真正需要的数据。以这种方式发送您的 Server-Request，您只会得到您真正需要的结果。 关键词：

查询和过滤