javascript - Chart.JS 自定义 - 如何调试？

Question

我正在使用 Chart.JS 创建条形图。工作正常:

https://jsfiddle.net/uzat4y0c/

现在，我想添加值标签来指示各个条形的大小。我用这段代码做到了这一点:

  animation: {
    onComplete: function(animation) {
        var ctx = this.chart.ctx;
        ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontFamily, 'normal', Chart.defaults.global.defaultFontFamily);
        ctx.fillStyle = "grey";
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';
        var dataset = this.data.datasets[1];
        for (var i = 0; i < dataset.data.length; i++) {
          for (var key in dataset._meta) {
            var model = dataset._meta[key].data[i]._model;
            ctx.fillText(dataset.data[i], model.x, model.y - 1);
          } //for key
        } //for i
      } //onComplete
  } //animation

工作正常，以及: https://jsfiddle.net/uzat4y0c/1/

但是，当我将鼠标悬停在条形元素上时，我的值标签会在动画更新时消失一会儿，正如您在上面的 fiddle 中测试的那样。

为了改进这一点，我试图找到在鼠标悬停时首先隐藏数字的代码段。这就是我卡住的地方。我使用了开发工具并在“请求动画帧”上设置了事件监听器断点，最终将我带到了这段 Chart.JS 代码:

requestAnimationFrame: function() {
            var me = this;
            if (me.request === null) {
                // Skip animation frame requests until the active one is executed.
                // This can happen when processing mouse events, e.g. 'mousemove'
                // and 'mouseout' events will trigger multiple renders.
                me.request = helpers.requestAnimFrame.call(window, function() {
                    me.request = null;
                    me.startDigest();
                });
            }
        },

在我第一次到达这里后，我可以循环遍历“me.request =”部分四次，然后值标签将在跨过最后一个大括号时消失。

不知何故，我错过了“隐藏”我的标签或(更有可能)在没有标签的情况下重新绘制 Canvas 的命令的确切位置。

如何通过正确调试来达到核心？感谢阅读!

Answer 1

最好使用插件绘制标签，而不是在动画竞争中绘制标签(这是罪魁祸首)。

plugins: [{
   animationCompleted: false,
   afterDatasetsDraw: function(chart, ease) {
      if (!this.animationCompleted && ease !== 1) return;
      this.animationCompleted = true;
      var ctx = chart.ctx;
      ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontFamily, 'normal', Chart.defaults.global.defaultFontFamily);
      ctx.fillStyle = "grey";
      ctx.textAlign = 'center';
      ctx.textBaseline = 'bottom';
      var dataset = chart.data.datasets[1];
      for (var i = 0; i < dataset.data.length; i++) {
         for (var key in dataset._meta) {
            var model = dataset._meta[key].data[i]._model;
            ctx.fillText(dataset.data[i], model.x, model.y - 1);
         } //for key
      } //for i
   }
}]

^{* 添加它，然后添加您的图表选项。}

ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ

var ctx = document.getElementById("testChart").getContext("2d");
// ctx.canvas.width = 300;
// ctx.canvas.height = 300;

var data = {
   labels: ["uno", "dos", "tres", "quattro"],
   datasets: [{
         label: "Invisible",
         data: [0, 20, 60, 0],
         backgroundColor: "transparent",
      }, {
         label: "Dollar",
         data: [20, 40, 30, 90],
         backgroundColor: "lightgreen",
      }, ] //datasets
};

var options = {
   responsive: true,
   scales: {
      xAxes: [{
         display: true,
         stacked: true,
      }, ], //xAxes
      yAxes: [{
            display: true,
            stacked: true,
            ticks: {
               beginAtZero: true,
               min: 0,
               max: 120,
            } //ticks
         }, ] //yAxes
   }, //scales


   title: {
      display: true,
      text: "Waterfall chart",
   },
   legend: {
      display: false,
      labels: {
         boxWidth: 80,
         fontColor: 'green'
      }
   },

   tooltips: {
      enabled: false
   }, //tooltips
}; //options


var myBarChart = new Chart(ctx, {
   type: 'bar',
   data: data,
   options: options,
   plugins: [{
      animationCompleted: false,
      afterDatasetsDraw: function(chart, ease) {
         if (!this.animationCompleted && ease !== 1) return;
         this.animationCompleted = true;
         var ctx = chart.ctx;
         ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontFamily, 'normal', Chart.defaults.global.defaultFontFamily);
         ctx.fillStyle = "grey";
         ctx.textAlign = 'center';
         ctx.textBaseline = 'bottom';
         var dataset = chart.data.datasets[1];
         for (var i = 0; i < dataset.data.length; i++) {
            for (var key in dataset._meta) {
               var model = dataset._meta[key].data[i]._model;
               ctx.fillText(dataset.data[i], model.x, model.y - 1);
            } //for key
         } //for i
      }
   }]
});

p,
canvas {
   border: 1px solid red;
}

#canvasWrapper {
   border: 1px solid green;
   padding: 2px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.js"></script>
<p>Lorem</p>
<p>ipsum</p>
<div id="canvasWrapper">
   <canvas id="testChart"></canvas>
</div>
<p>Lorem</p>
<p>ipsum</p>

引用here了解有关 ChartJS 插件的更多信息。