如何使用 chart.js 和 chartjs-node-canvas 在 PDF 的条形顶部显示值?

How to show values on top of bars in a PDF using chart.js and chartjs-node-canvas?

我需要使用 chartjs-node-canvas 在 Node

中创建 PDF 来显示条形顶部的值

我已经能够重新创建我在 HTML 中看到的内容,但是插件有不接受“动画”的限制 属性,因此我想知道是否有是另一种在 Node 中执行此操作的方法,无需其他外部插件。 This is my current code

var ctx = document.getElementById("myChart");
var chart = new Chart(ctx, {
  type: "bar",
  data: {
    labels: ["a", "b", "c", "d", "e", "f"],
    datasets: [
      {
        type: "bar",
        backgroundColor: "blue",
        borderColor: "blue",
        borderWidth: 1,
        label: "promedio",
        order: 1,
        data: [60, 49, 72, 90, 100, 60]
      },
      {
        type: "bar",
        backgroundColor: "orange",
        borderColor: "orange",
        borderWidth: 1,
        label: "promedio",
        order: 1,
        data: [40, 5, 20, 30, 10, 6]
      },
      {
        type: "line",
        label: "casos",
        data: [25, 13, 30, 35, 25, 40],
        lineTension: 0,
        backgroundColor: "red",
        borderColor: "red",
        order: 0,
        fill: false
      }
    ]
  },
      options: {
        scales: {
          yAxes: [{
            ticks: {
              beginAtZero: true
            }
          }]
        },
        animation: {
          duration: 1,
          onComplete: function () {
            var chartInstance = this.chart,
              ctx = chartInstance.ctx;
            ctx.font = Chart.helpers.fontString(16, 20, 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 (bar, index) {
                var data = dataset.data[index];
                ctx.fillText(data, bar._model.x, bar._model.y - 2);
              });
            });
          }
        },
        legend: {
          display: false
        }
      }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>

<body>
  <canvas id="myChart" width="400" height="200"></canvas>
</body>

简短的回答是否定的,您要么必须实现自己的外部内联插件,要么使用数据标签插件 (https://chartjs-plugin-datalabels.netlify.app/samples/charts/bar.html),因为没有内置的方法来实现这个