ChartJS-线图 - 数据标签格式功能无法正常工作

Question

我有以下html/js代码，如下所示：

• 标签
• 值

并将其转换为带有标签上标签的线图：

<div style = "position:relative; bottom:140px; z-index: -2;">
<canvas id="lineChart" width = 600 height = 200></canvas>
<script>
    Chart.register(ChartDataLabels);
    var ctx = document.getElementById("lineChart").getContext("2d");
    var linechart = new Chart(ctx, {
        type: "line",
        data: {
            labels: {{ labels | safe}},
            datasets: [
                {
                    label: "Data points",
                    data: {{ values | safe}},
                    fill: false,
                    borderColor: "rgb(75, 192, 192)",
                    lineTension: 0.5
                }
            ]
        },
        options: {
        responsive: true,
        layout: {
            padding: {
                top: 100
                    }
                },
        scales: {
          x: {
            grid: {
              display: false
            }
          },
          y: {
            display: false,
          }
        },

        plugins: {
            legend: {
                display: false
            },
            datalabels: {
                anchor: 'end',
                align: 'top',
                formatter: Math.round,
                font: {
                    weight: 'bold',
                    size: 15
                }
            }

        }
        }
    });
</script>

这很好：

但是，我希望标签到达标签 时，请使用'£'符号，然后'm'，

在每次尝试使用格式化函数

formatter: function(value){
            return value + 'm';

例如：或任何其他组合，图表都无法返回。我完全困惑为什么。

有什么建议吗？

Answer 1

以下格式对我来说很好。

formatter: v => '£' + v + 'm'

请在下面查看您的修订和可运行的代码。

Chart.register(ChartDataLabels);
new Chart('myChart', {
  type: "line",
  data: {
    labels: [2015, 2016, 2017, 2018, 2019, 2020, 2021],
    datasets: [{
      label: "Data points",
      data: [567, 894, 883, 833, 710, 714, 578],
      fill: false,
      borderColor: "rgb(75, 192, 192)",
      lineTension: 0.5
    }]
  },
  options: {
    responsive: true,
    layout: {
      padding: {
        top: 100
      }
    },
    scales: {
      x: {
        grid: {
          display: false
        }
      },
      y: {
        display: false,
      }
    },
    plugins: {
      legend: {
        display: false
      },
      datalabels: {
        anchor: 'end',
        align: 'top',
        formatter: v => '£' + v + 'm',
        font: {
          weight: 'bold',
          size: 15
        }
      }
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.0/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2"></script>
<canvas id="myChart" height="100"></canvas>

如果您的代码仍然不起作用，则某处可能存在语法错误。尝试打开浏览器的devtools，并检查“控制台”选项卡，以了解可帮助您找到问题源的任何错误。