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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Chart.js

Chart.jsは、多様なグラフを組み込めるJavaScriptのライブラリ。折れ線グラフや棒グラフ、円グラフ、レーダーチャートなどのグラフの種類が用意されています。HTML5のCanvasを用いて描画され、マークアップも分かりやすく、簡単に編集することが可能です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

3140閲覧

[Chart.js][JavaScript] グラフ部分をクリックして対応の再生位置に遷移させたい、再生バー動かしたらカーソルも移動させたい

退会済みユーザー

退会済みユーザー

総合スコア0

Chart.js

Chart.jsは、多様なグラフを組み込めるJavaScriptのライブラリ。折れ線グラフや棒グラフ、円グラフ、レーダーチャートなどのグラフの種類が用意されています。HTML5のCanvasを用いて描画され、マークアップも分かりやすく、簡単に編集することが可能です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2021/09/27 08:58

編集2021/09/28 03:28

前提

  • 関連質問

[Chart.js][JavaScript]再生数グラフ付きプレーヤー開発・再生位置カーソルを追加したい
https://teratail.com/questions/360634
[Chart.js][JavaScript] CSSで描画した円カーソルをChart.jsのグラフ項目のトップに表示させたい
https://teratail.com/questions/360753

実現したいこと

  • コントロール部分の再生バーを動かすと対応したグラフの項目にカーソルを移動させたい
  • 棒グラフの位置をクリックするとコントロールバーの対応する再生位置に遷移させたい。

サンプルは映像が30秒で、棒グラフの項目数も30個なのでちょうど1項目=1秒で対応していますが、将来この関係が変化した際でも対応できるようにしたいです。

今のところは
(1) 動画の再生位置を取得
(2) 動画の長さ÷グラフ項目数を出して、1項目あたりの間隔を計算
(3) 計算された間隔×再生位置で遷移先の時間を確定
と実装時の予想を立てています。

今のところ現在の再生位置取得と、コントロールバー上でのmousemoveイベント取得までできました。
取得したこれらの情報をカーソル側に伝えてカーソルを動かす方法を考えているところです。

またプレーヤー再生位置とカーソルの連動ロジックについてはまだ考え中なのですが、もし良い案がありましたら共有いただけると幸いです。
イメージ説明

余談・疑問

上記ほどの優先度ではないのですが、疑問に思った点がいくつかあります。

  • ビデオプレーヤーのレスポンシブ表示について

Chart部分はchart.jsの設定でレスポンシブ表示に対応してくれました。
しかしビデオの部分についてはウィンドウの大きさを変えても大きさが変わりません。
videoタグのwidth・heightでは具体的な数字しか入力できないとあったので、CSSにてプレーヤーのDivのwidth・heightを100%に指定しましたが、これは他に方法があるのでしょうか?

  • 真ん中の凡例「Views」を非表示化させたい

Chart.jsの設定にてoptions.title.display: falseとすると非表示になると見かけたのですが、そのような表示にしてもこの凡例が表示されたままです。
X軸・Y軸の凡例は消せましたが、グラフ全体のは消せない仕様なのでしょうか?

ソースコード

JavaScript

1<html> 2 <head > 3 <meta http-equiv="Content-Style-Type" content="text/html"> 4 <title>Chart.js Sample</title> 5 <style type="text/css"> 6 #video { 7 z-index: 1; 8 position: relative; 9 width: 100%; 10 height: 100%; 11 } 12 13 #chart { 14 z-index: 2; 15 position: absolute; 16 top: 5%; 17 width: 100%; 18 height: 87%; 19 } 20 21 #cursor { 22 z-index: 4; 23 position: absolute; 24 width: 20px; 25 height: 20px; 26 border-radius: 50%; 27 background: red; 28 } 29 </style> 30 </head> 31 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script> 32 <body> 33 <div id="video"> 34 <video controls> 35 <source src="file_example_MP4_1280_10MG.mp4" type="video/mp4"> 36 </video> 37 </div> 38 39 <div id="chart"> 40 <canvas id="myChart"></canvas> 41 <script> 42 var data_labels = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 43 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 44 21, 22, 23, 24, 25, 26, 27, 28, 29, 30 ] 45 var data_sets = [ 35, 25, 33, 15, 18, 6, 20, 39, 12, 8, 46 6, 15, 35, 30, 23, 10, 8, 5, 11, 30, 47 35, 39, 40, 41, 32, 20, 12, 9, 3, 1 ] 48 var canvas = document.getElementById( 'myChart' ); 49 var context = canvas.getContext('2d'); 50 var graph = { 51 type: 'bar', 52 data: { 53 labels: data_labels, 54 datasets: [{ 55 label: 'Views', 56 data: data_sets, 57 backgroundColor: [ 58 'rgba(255, 255, 0, 0.3)' 59 ], 60 barPercentage: 1, 61 categoryPercentage: 1, 62 }] 63 }, 64 options: { 65 title: { 66 display: false, 67 }, 68 responsive: true, 69 legend: { 70 display: false, 71 }, 72 scales: { 73 x: { 74 display: false, 75 }, 76 y: { 77 display: false, 78 } 79 }, 80 plugins: { 81 tooltip: { 82 enabled: false, 83 external: function(context) { 84 var tooltipEl = document.getElementById('chartjs-tooltip'); 85 if (!tooltipEl) { 86 tooltipEl = document.createElement('div'); 87 tooltipEl.id = 'chartjs-tooltip'; 88 89 var canvas_ = document.createElement("canvas"); 90 canvas_.height = 30; 91 canvas_.width = 30; 92 tooltipEl.appendChild(canvas_); 93 document.body.appendChild(tooltipEl); 94 95 context_ = canvas_.getContext('2d') 96 context_.beginPath(); 97 context_.arc( 98 10, 99 10, 100 10, 101 0 * Math.PI / 180, 102 360 * Math.PI / 180 103 ); 104 context_.fillStyle = "red"; 105 context_.fill(); 106 canvas_.id = "cursor"; 107 108 } 109 110 var tooltipModel = context.tooltip; 111 if (tooltipModel.opacity === 0) { 112 tooltipEl.style.opacity = 0; 113 return; 114 } 115 // グラフ内部にカーソルがなくてもツールチップがX軸方向に動くようにするためには、以下2行の設定が必要。 116 tooltipModel.options.intersect = false; 117 tooltipModel.options.mode = 'x'; 118 119 var position = context.chart.canvas.getBoundingClientRect(); 120 var bodyFont = Chart.helpers.toFont(tooltipModel.options.bodyFont); 121 122 tooltipEl.style.opacity = 1; 123 tooltipEl.style.position = 'absolute'; 124 tooltipEl.style.left = position.left + window.pageXOffset + tooltipModel.caretX -10+ 'px'; 125 tooltipEl.style.top = position.top + window.pageYOffset + tooltipModel.caretY -10+ 'px'; 126 tooltipEl.style.font = bodyFont.string; 127 tooltipEl.style.padding = tooltipModel.padding + 'px ' + tooltipModel.padding + 'px'; 128 tooltipEl.style.pointerEvents = 'none'; 129 130 //デバッグ:currentTime表示 131 var video_ = document.querySelector('video'); 132 video_.addEventListener("timeupdate", (e) => { 133 var currentTime_ = video_.currentTime; 134 console.log(currentTime_); 135 }); 136 137 //ビデオの再生箇所を検出してカーソルを移動したい(途中) 138 video_.addEventListener('mousemove', (e) => { 139 console.log('mousemove'); 140 }); 141 //棒グラフの部分をクリックすると、カーソルと再生位置をさせたい 142 143 } 144 } 145 }, 146 } 147 }; 148 var myGraph = new Chart( canvas, graph ); 149 </script> 150 </div> 151 </body> 152</html>

補足情報

  • Chart.js 3.5.1 最新版
  • 使用MP4ファイル

https://file-examples.com/index.php/sample-video-files/sample-mp4-files/

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

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

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

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

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

guest

回答1

0

ベストアンサー

とりあえず今わかるところだけですが、
・真ん中の凡例「Views」を非表示化させたい

これは簡単で、

diff

1 plugins: { 2+ legend: { 3+ display: false, 4+ ​}, 5 ​tooltip: { 6 ​enabled: false, 7 ​external: function (context) {

こうするだけでいいと思います。

参照:Chart.jsドキュメント|Legend

・ビデオプレーヤーのレスポンシブ表示について
-> ラッパーの中にVideoとチャートを並べて、親子ともwidth:100%のみ指定(Videoの再生コントロールを露出させるために、chart-areaにはbottomを指定)というのはどうでしょうか。

css

1 <style type="text/css"> 2 .wrapper { 3 position: relative; 4 padding-bottom: 60%; 5 width:100%; 6 } 7 8 .wrapper video { 9 position: absolute; 10 width: 100%; 11 } 12 13 .chart-area { 14 z-index: 3; 15 position: absolute; 16 width: 100%; 17 bottom:100px; 18 } 19以下略 20

HTML

12 <body> 3 <div class="wrapper"> 4 <video id="videosrc" src="test.mp4" controls></video> 5 <div class="chart-area"> 6 <canvas id="myChart"></canvas> 7 </div> 8 </div> 9 <script> 10以下略

 
---

※本丸の「Videoコントロールの再生進行状況と、Chart.jsの画面クリック/描画」を双方向に組み合わせる、というのはまだ完全に調べ切れていません。

とりあえず、Chart領域クリック -> Video再生位置に反映するのは下記でできました。

クリックした要素のインデックスをトータル要素数で割り返し、動画の総再生時間に掛けることで
クリックした位置に相当するシークポイントを算出し、そこに移動させます。

options: { onClick: (e) => { // クリックした要素の取得 var ele = myGraph.getElementsAtEventForMode( e, 'index', { intersect: false }, false) var eleIndex = ele[0].index; var eleLength = data_sets.length; // 再生位置更新 var v = document.getElementById("videosrc"); var duration = v.duration; v.currentTime = duration * eleIndex / eleLength },

残り、動画コントロール->チャートへのカーソルの描画について
コントロール側の値はtimeupdate等で取得できているので、
・Barチャートの各要素の高さを取得する方法
・特定のindexの要素のBarの頂点位置にカーソルを描画/更新する方法
または
・特定の要素のツールチップ位置にカーソルを固定表示する方法

が必要になりそうです。

Chart.jsのversion3系に関する情報がver2に比べて少ないのと、公式ドキュメントもそんなに親切でないので、かなり苦労しそうですね。

なお、前の質問にあった、「グラフ領域内にマウスが動いたときに棒グラフの頂点にカーソルを追従させる方法」の実装については、今回で要件が全く変わっているため使えませんでした。

投稿2021/10/02 06:22

編集2021/10/02 06:33
退会済みユーザー

退会済みユーザー

総合スコア0

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

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

退会済みユーザー

退会済みユーザー

2021/10/05 07:08

遅くなりましたが、回答いただきありがとうございます。 凡例「Views」の非表示化とプレーヤーのレスポンシブ表示についてはこちらでも確認できました、参考になりました。 ちなみに本丸であるシークバーとグラフカーソルの連動、グラフ項目クリックでシークバーの移動については、Chart.jsの過去バージョンまたはHighchartなど別ライブラリでは実現可能なのでしょうか。 一番大事なのが上記項目の実装でChart.jsにはこだわりはないので、もし実現可能でしたら今更ですが他のライブラリに変更することも視野に入れたいと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問