JavaScript Chart.js 値が0のときはラベルに表示しないようにする

Question

PHPでMySQLからデータを取得し、Chart.jsで円グラフ化しようとしています。
円グラフ化はできており、Chart.jsのプラグイン機能を使って、デフォルトでは表示されないラベルを常に表示することもできました。
ただ、PHPで取得したデータが0のときも円グラフに「0」と表示されてしまうので、これを回避したいのですが、なかなかうまくいきません。

↓取得しているデータがこちらだとして。
青森｜0
秋田｜5
岩手｜0
山形｜0
宮城｜0
福島｜1

↓こんな感じで表示されています。
青森の0と、岩手、山形、宮城の0が表示されてしまっています（岩手、山形、宮城の0は重なって表示されています）。

ForEachとif文を使って、PHPで取得している各Data（$s_cnt[1]～$s_cnt[6]）が0のときはラベルを表示しない、とできればいいのだろうと試行錯誤していますが、全てのラベル表記がされなかったり、グラフそのものが消えてしまったりとうまくいきません。

JavaScript初心者でお恥ずかしい限りですが、有識者の方のお知恵を拝借できれば幸いです。
宜しくお願い致します。
（文字数制限に接触してしまうので、コードは最低限の部分のみ記載させて頂きます
）

// Define a plugin to provide data labels:ラベルを常に表示する
// 参考:　https://beiznotes.org/data-label-on-chart-js/

Chart.plugins.register({
    afterDatasetsDraw: function (chart, easing) {
        // To only draw at the end of animation, check for easing === 1
        var ctx = chart.ctx;

        chart.data.datasets.forEach(function (dataset, i) {
            var meta = chart.getDatasetMeta(i);
            if (!meta.hidden) {
                meta.data.forEach(function (element, index) {
                  

                    // テキストフォント
                    ctx.fillStyle = 'rgb(0, 0, 0)';
                    var fontSize = 30;
                    var fontStyle = 'bold';
                    var fontFamily = 'Helvetica Neue';
                    ctx.font = Chart.helpers.fontString(fontSize, fontStyle, fontFamily);

                    // 文字列に変換
                    var dataString = dataset.data[index].toString();

                    // 文字の配置
                    ctx.textAlign = 'center';
                    ctx.textBaseline = 'middle';
                    var padding = 5;
                    var position = element.tooltipPosition();
                    ctx.fillText(dataString, position.x, position.y - (fontSize / 2) - padding);
                });
            }
        });
    }
});

//グラフの中身: myPieChart_1
  var ctx = document.getElementById("myPieChart_1");
  var myPieChart_1 = new Chart(ctx, {
    type: 'pie',
    data: {
      
      labels: ["青森", "秋田", "岩手", "山形", "宮城","福島"],
      datasets: [{
          backgroundColor: [
              "#c0c0c0",
              "#f4d002",
              "#ffff51",
              "#80c686",
              "#509458",
              "#1168ad",
          ],
          // dataは、PHPで取得し、変数に格納
          data: ["<?php  echo $s_cnt[1]; ?>", "<?php  echo $s_cnt[2]; ?>", "<?php  echo $s_cnt[3]; ?>","<?php  echo $s_cnt[4]; ?>","<?php  echo $s_cnt[5]; ?>",  "<?php  echo $s_cnt[6]; ?>"]
      }]
    },

    options: {
      title: {
        display: true,
        fontSize: 30,
        text: '東北'　
      }
    }
  });

Answer 1

0のときはラベルを表示しない

PHP側でデータを弄るのではなく、JavaScript側でCanvas操作における 描画する/しない の切り分け処理で対応できると思います。

CanvasRenderingContext2D の描画処理部を切り分けるだけで良さそう。

// 文字列に変換
var dataString = dataset.data[index].toString();

// 文字の配置（ "0" のときは配置しない）
if( dataString!=="0" ) {
  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';
  var padding = 5;
  var position = element.tooltipPosition();
  ctx.fillText(dataString, position.x, position.y - (fontSize / 2) - padding);
}

追記）ラベルの文字を最初にチェックする方法

フォント関連処理も無駄なので、早々に次の element を処理するため return する。

meta.data.forEach(function (element, index) {
  // 文字列に変換
  var dataString = dataset.data[index].toString();
  if( dataString==="0" ) return;

  // テキストフォント
  /* omitted */

  // 文字の配置
  /* omitted */
});

Comments

[退会済みユーザー]

ご教授ありがとうございました。ご指摘のとおりにやってみたところ、希望通りに、0のときはラベル表示されないようになりました。
全然検討違いのとこで四苦八苦していたのがお恥ずかしいです。フォント関連処理の部分もご指摘いただきありがとうございました。
JavaScript、もっと勉強します。お忙しい中、ご教授頂きまして本当にありがとうございました。