Chart.JSのカスタマイズ-デバッグ方法は？

debugcn 投稿 Dev

Happysmithers

Chart.JSを使用して棒グラフを作成しています。正常に動作しています：

ここで、個々のバーのサイズを示す値ラベルを追加したいと思います。私はこのコードでこれを行いました：

  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/

ただし、バーの要素にカーソルを合わせると、上記のフィドルでテストしているように、アニメーションが更新されている間、値ラベルが一瞬消えます。

これを改善するために、私はマウスオーバー時に最初に数字を隠すコードを見つけようとしています。これは私が立ち往生しているところです。開発ツールを使用して、「アニメーションフレームのリクエスト」にイベントリスナーブレークポイントを設定しました。これにより、最終的に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 =」の部分を4回ループできます。その後、最後の中括弧をまたぐと、値ラベルが消えます。

どういうわけか、ラベルを「非表示」にするコマンド、または（より可能性が高い）ラベルなしでキャンバスを再描画するコマンドが正確にどこにあるのかがわかりません。

適切にデバッグすることでこれの核心に到達する方法は？読んでくれてありがとう！

ɢʀᴜɴᴛ

アニメーションの競合で描画するのではなく、プラグインを使用してラベルを描画する方が適切です（これが原因です）。

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>

ChartJSプラグインの詳細については、こちらを参照してください。

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]