実現したいこと
これを実現するには、どうしたらいいでしょうか?
※「上記図のように実現したい内容が再現できてるからいいじゃないか」と思われるかもしれませんが、2つ目の図は、nullになったら1つ前の日付のデータをコピーしてあてがうという処理を入れているため、それっぽい形に仕上がっているにすぎません。
本来であれば、ちゃんとしたHighchartsの書き方(や、オプションなど)で描画させたいのです。
※Highchartsのバージョンは「6.0.3」を使っています。
発生している問題・分からないこと
上記の通りです。
Teratail内を調べたところ似た質問がありました。
[js]折れ線グラフで欠損値を飛ばして線を結びたい](https://teratail.com/questions/180680)
こちらはHighchartsではなくChart.jsのようでそれであればオプション「spanGaps: true,」を使うことで実現出来るようです。
これと同じようにHighchartsでもspanGaps: true,があるのかなと思い公式サイトでドキュメントを調べたところ関連する記事がありませんでした。
https://api.highcharts.com/highcharts/chart
該当のソースコード
具体的なソースコードは社外秘情報のため載せられません。 そのため、「このサイトが参考になる」や「こんなオプションを使ったらいい」などがありましたらお教えいただければと思います。
試したこと・調べたこと
- teratailやGoogle等で検索した
- ソースコードを自分なりに変更した
- 知人に聞いた
- その他
上記の詳細・結果
上記の通りです。Teratail内で調べ似た質問からspanGaps: true,が使えそうと思い実装しましたが公式サイトを見る限りHighchartsには非対応となっているそうで見つかりませんでした。
補足
よろしくお願いいたします。
『追記』
melian様がご指摘くださった通り
plotOptions.series.connectNulls の通りそれを設定したところうまくいきました!
https://api.highcharts.com/highcharts/plotOptions.series.connectNulls
ありがとうございます!!
回答1件
あなたの回答
tips
プレビュー