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

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

新規登録して質問してみよう
ただいま回答率
85.35%
Google Apps Script

Google Apps ScriptはGoogleの製品と第三者のサービスでタスクを自動化するためのJavaScriptのクラウドのスクリプト言語です。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

1回答

4833閲覧

jQuery.Timeline ヘッダー部を日にちではなく時間表示にしたい

mi33mi

総合スコア4

Google Apps Script

Google Apps ScriptはGoogleの製品と第三者のサービスでタスクを自動化するためのJavaScriptのクラウドのスクリプト言語です。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2020/03/30 15:04

jQuery.Timelineを使用してガントチャートを作成していますが、上の時間軸が時間表示になりません。
オプションにもそれらしき設定がないのですが、表示を時間にすることは可能でしょうか。
宜しくお願いいたします。

【理想】
イメージ説明

【現状】
イメージ説明

html

1<!DOCTYPE html> 2<html> 3 <head> 4 <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> 5 <link href="https://cdn.jsdelivr.net/gh/ka215/jquery.timeline@2.0.0/dist/jquery.timeline.min.css" rel="stylesheet"> 6 <script src="https://cdn.jsdelivr.net/gh/ka215/jquery.timeline@2.0.0/dist/jquery.timeline.min.js"></script> 7 <base target="_top"> 8 </head> 9 <body> 10 <div id="myTimeline"> 11 <ul class="timeline-events"> 12 <!-- 1行目 --> 13 <li data-timeline-node="{ start:'2020-03-04 00:00',end:'2020-03-04 02:30', bgColor:'#d8e3cf' }">鹿児島</li> 14 <li data-timeline-node="{ start:'2020-03-04 03:00',end:'2020-03-04 05:00', bgColor:'#cfe3de' }">長崎</li> 15 <li data-timeline-node="{ start:'2020-03-04 05:00',end:'2020-03-04 08:30', bgColor:'#cfd5e3' }">島根</li> 16 <li data-timeline-node="{ start:'2020-03-04 10:00',end:'2020-03-04 14:00', bgColor:'#dbd3c8' }">鳥取</li> 17 </ul> 18</div> 19<script type="text/javascript"> 20$(function () { 21 let options = { 22 rows: 6, 23 scale: 'hour', 24 startDatetime: '2020-03-04 00:00', 25 range: 3, 26 datetimeFormat:{day:'D, j M'}, 27 headline : { 28 display : true, 29 title : "", 30 range : true, 31 locale : 'ja', 32 format : { hour12: false } 33 }, 34 35 } 36 $("#myTimeline").Timeline(options) 37}); 38</script> 39 </body> 40</html> 41

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ドキュメントを見る限り、これで設定するみたいですね。
当方で試したところ、動作しました。
Ruler | Configuring Plugin Options – Monaural Sound

投稿2020/03/31 01:22

Lhankor_Mhy

総合スコア36960

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問