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

前提

関連質問

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

実現したいこと

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

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

今のところは
(1) 動画の再生位置を取得
(2) 動画の長さ÷グラフ項目数を出して、１項目あたりの間隔を計算
(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/

行動規範の内容に同意します

回答1件

ベストアンサー

とりあえず今わかるところだけですが、
・真ん中の凡例「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
1略
2    <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にはこだわりはないので、もし実現可能でしたら今更ですが他のライブラリに変更することも視野に入れたいと思います。

行動規範の内容に同意します