質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.38%

JavaScript:chart.jsのツールチップで空白値の際、「NaN」を表示させないようにしたい。

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 2,256
退会済みユーザー

退会済みユーザー

chart.jsを使い積立グラフの作成をしました。

 var ctx = document.getElementById("LineChart").getContext('2d');
 var chart = new Chart(ctx, {
   type: "bar",
   data:{
     labels:["1月","2月","3月","4月","5月","6月","7月"],
     datasets:[{
       label:"要素1",
       data:[4,5,9,14,,24,30],
     },
     {
       label:"要素2",
       data:[,1.5,1.9,1.4,1.5,2,4,3.0],
     }]
   },
   options:{
     tooltips: {
       mode: 'nearest',
       intersect: false,
       mode: 'index',
     },
     scales:{
       xAxes:[{
         stacked: true
       }],
       yAxes:[{
         stacked: true
       }]
     }
   }
 });


mode: 'index'を記述し、マウスホバー時に全ての要素を表示するよう設定したのですが、空白値の場合「NaN」が表示されてしまいます。
これを表示したくないのですが、どのようにしたら良いでしょうか?イメージ説明

<script>
 var ctx = document.getElementById("LineChart").getContext('2d');
 var chart = new Chart(ctx, {
    type: "bar",
    data:{
      labels:["1月","2月","3月","4月","5月","6月","7月"],
      datasets:[{
        data:[4,5,9,14,,24,30],
      },
      {
        data:[,1.5,1.9,1.4,1.5,2,4,3.0],
      }]
    },
    options:{
      tooltips: {
        mode: 'nearest',
        intersect: false,
        mode: 'index',
        callbacks: {
          label: item => item.value.replace('NaN', '')
        }
      },
      scales:{
        xAxes:[{
          stacked: true
        }],
        yAxes:[{
          stacked: true
        }]
      }
    }
  });
</script>
<div style="width:100%; overflow-x:auto; overflow-y:visible">
  <div class="linechart_container">
    <canvas id='LineChart'></canvas>
  </div>
</div>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+2

こんにちは

ツールチップコールバック の label を使えばできるかと思います。

たとえば、以下の3行を tooltips の設定に追加します。

callbacks: {
  label: item => item.value.replace('NaN', '') 
}

上記によって NaNのほうのラベルは表示されなくなります。
以上、参考になれば幸いです。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/10/02 04:17

    それであれば、こうですね。
    https://codepen.io/jun68ykt/pen/gOYNVLO?editors=1010

    キャンセル

  • 2019/10/02 04:20

    無事解決しました。
    夜遅くまで付き合って下さり本当にありがとうございました!

    キャンセル

  • 2019/10/02 04:21

    👍

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.38%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る