Question

我有这个chart设置，其中我使用动画onComplete

在条形图上显示值

animation: {
      onComplete: function () {
        var chartInstance = this.chart,
            ctx = chartInstance.ctx;
        ctx.textAlign = 'center';
        ctx.fillStyle = "rgba(0, 0, 0, 1)";
        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 - 5);

          });
        });
      }

正如你所看到的那样，这些数字位于条形图的顶部 - 但是当你将鼠标悬停在条形图上时，它会因动画效果而闪烁。

我更喜欢它不是这个动画效果所以它不会像这样闪光 - 是否有另一种方法来制作我在这里做的，没有你悬停时的flash /动画？

Answer 1

对于这种情况，而不是＆＃34; onComplete＆＃34;你应该使用＆＃34; onProgress＆＃34; 。试试这段代码：

animation: {
      onProgress: function () {
        var chartInstance = this.chart,
            ctx = chartInstance.ctx;
        ctx.textAlign = 'center';
        ctx.fillStyle = "rgba(0, 0, 0, 1)";
        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 - 5);

          });
        });
      }

在chart.js中使用条形图上方的粘性数字

1 个答案: