[js]折れ線グラフで欠損値を飛ばして線を結びたい

Question

前提・実現したいこと

現在chartjsを使用して折れ線グラフをシステム上に実装しています。
その際欠損値があった場合、その値を飛ばして線を結びたいのですがうまくできません。
例えば、横軸が1〜12月だった場合に、6月の値がなかったとします。
その時5月と7月のデータを線で結びたいと思っています。
6月分のデータをnullで渡してやると欠損は表現できますが、5月と7月は線で結ばれません。（線が途切れてしまいます）

chartjsにこだわりはなく、他のプラグインで実現できるならそちらを使用する形でも構いません。

こうやればできる、このプラグインならできるという情報をお持ちの方、助言いただけますでしょうか。

該当のソースコード

サンプルのソースは以下のとおりです。

$(function() {
  var ctx = document.getElementById('graph').getContext('2d');
  var myChart = new Chart(ctx, {
    type:"line",
    data:{
      labels:['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
      datasets:[
        {
          label:"サンプル",
          data:[10, 20, 30, 40, 25, null, 30, 35, 20, 15, 10, 5],
          borderColor:"rgba(54, 162, 235, 0.8)",
          backgroundColor:"rgba(54, 162, 235, 0.5)"
        }
      ]
    }
  });
});

結果としては以下のグラフが描画されます。
5月と7月の間に空白ができてしまうので5月と7月も線で結びたいです。

Comments

[m.ts10806]

具体的なデータをご提示ください。
あとchartjsを利用した場合のコードと、表示状態を画面キャプチャでご提示ください。

[yotaro-58]

ご質問ありがとうございます。
コードとキャプチャを追記しましたのでご確認お願いいたします。

[m.ts10806]

なるほど。仮に間の値を入れてしまうと点がついてしまうから、ということですね。状況分かりました。

Answer 1

Chart.js で欠損を補間するかどうかは spanGaps を使います

こんな感じに

datasets:[
        {
          label:"サンプル",
          data:[10, 20, 30, 40, 25, null, 30, 35, 20, 15, 10, 5],
          borderColor:"rgba(54, 162, 235, 0.8)",
          backgroundColor:"rgba(54, 162, 235, 0.5)",
          spanGaps: true,
        }
      ]

Comments

[yotaro-58]

ご回答ありがとうございます！
希望とおりに動きました。
オプションであったのですね。調査不足でした。