[Chart.js][JavaScript] CSSで描画した円カーソルをChart.jsのグラフ項目のトップに表示させたい

前提・実現したいこと

関連質問

[Chart.js][JavaScript]再生数グラフ付きプレーヤー開発・再生位置カーソルを追加したい
https://teratail.com/questions/360634

上記質問では回答をいただきグラフ上にカーソルを表示させることができました。
こちらでのコードを別ファイルにて実装し、videoタグでビデオ部分を表示させてそこにグラフとカーソル部分をオーバーレイさせたところ、カーソルがグラフやビデオ部分より低層となってしまい表示されません。

ビデオ部分とグラフ部分はDivで区切り、CSSでz-indexを指定していますが、カーソルが隠れてしまうのでカーソルもCSSで定義し、z-indexをMAX値に設定することで表示されると考えています。

①JavaScriptで描画ではなくCSSで定義されたカーソルも同様に、マウスカーソルの動きに沿ってグラフの各項目トップを移動させることは可能でしょうか？

②単純にビデオ>グラフ>カーソルの順に表示させると、ビデオの再生やシークができなくなります。
よってグラフの描画部分を一部に留めてコントロール部分を露出させれば再生できるのでしょうか？

よろしくお願いいたします。

ソースコード

<html>
    <head >
        <meta http-equiv="Content-Style-Type" content="text/html">
        <title>Chart.js Sample</title>
        <style type="text/css">
            #video {
                z-index: 1;
                position: relative;
                width: 100%;
                height: 100%;
            }

            #chart {
                z-index: 2;
                position: absolute;
                top: 17%;
                width: 100%;
                height: 100%;
            }

            #cursor {
                z-index: 4;
                position: absolute;
                top: 100;
                left: 100;
                width: 10px;
                height: 10px;
                border-radius: 50%;
                background: red;
            }
        </style>
    </head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script>
    <body>
        <div id="video">
            <video src="file_example_MP4_1280_10MG.mp4" controls></video>
        </div>

        <div id="chart">
            <canvas id="myChart"></canvas>
            <script>
                var data_labels = [ 1,  2,  3,  4,  5,  6,  7,  8,  9,  10,
                                    11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
                                    21, 22, 23, 24, 25, 26, 27, 28, 29, 30  ] 
                var data_sets = [   35, 25, 33, 15, 18, 6,  20, 39, 12, 8,
                                    6,  15, 35, 30, 23, 10, 8,  5,  11, 30,
                                    35, 39, 40, 41, 32, 20, 12, 9,  3,  1   ]
                var canvas = document.getElementById( 'myChart' );
                var context = canvas.getContext('2d');
                var graph = {
                    type: 'bar',
                    data: {
                        labels: data_labels,
                        datasets: [{
                            label: 'Views',
                            data: data_sets,
                            backgroundColor: [
                                'rgba(255, 255, 0, 0.3)'
                            ],
                            barPercentage: 1,
                            categoryPercentage: 1,
                        }]
                    },
                    options: {
                        title: {
                            display: false,
                        },
                        responsive: true,
                        legend: {
                            display: false,
                        },
                        scales: {
                            x: {
                                display: false,
                            },
                            y: {
                                display: false,
                            }
                        },
                        plugins: {
                            tooltip: {
                                enabled: false,
                                external: function(context) {
                                    var tooltipEl = document.getElementById('chartjs-tooltip');
                                    if (!tooltipEl) {
                                        tooltipEl = document.createElement('div');
                                        tooltipEl.id = 'chartjs-tooltip';

                                        var canvas_ = document.createElement("canvas");
                                        canvas_.height = 30;
                                        canvas_.width = 30;
                                        tooltipEl.appendChild(canvas_);
                                        document.body.appendChild(tooltipEl);

                                        context_ = canvas_.getContext('2d')
                                        context_.beginPath();
                                        context_.arc(
                                            10,
                                            10,
                                            10,
                                            0 * Math.PI / 180,
                                            360 * Math.PI / 180
                                        );
                                        context_.fillStyle = "red";
                                        context_.fill();
                                    }

                                    var tooltipModel = context.tooltip;
                                    if (tooltipModel.opacity === 0) {
                                        tooltipEl.style.opacity = 0;
                                        return;
                                    }
                                    // グラフ内部にカーソルがなくてもツールチップがX軸方向に動くようにするためには、以下2行の設定が必要。
                                    tooltipModel.options.intersect = false;
                                    tooltipModel.options.mode = 'x';

                                    var position = context.chart.canvas.getBoundingClientRect();
                                    var bodyFont = Chart.helpers.toFont(tooltipModel.options.bodyFont);

                                    tooltipEl.style.opacity = 1;
                                    tooltipEl.style.position = 'absolute';
                                    tooltipEl.style.left = position.left + window.pageXOffset + tooltipModel.caretX -10+ 'px';
                                    tooltipEl.style.top = position.top + window.pageYOffset + tooltipModel.caretY -10+ 'px';
                                    tooltipEl.style.font = bodyFont.string;
                                    tooltipEl.style.padding = tooltipModel.padding + 'px ' + tooltipModel.padding + 'px';
                                    tooltipEl.style.pointerEvents = 'none';
                                }
                            }
                        },
                    }
                };
                var myGraph = new Chart( canvas, graph );
            </script>
        </div>
    </body>
</html>

補足情報

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

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

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

回答1件

ベストアンサー

①JavaScriptで描画ではなくCSSで定義されたカーソルも同様に、マウスカーソルの動きに沿ってグラフの各項目トップを移動させることは可能でしょうか？

これは簡単で、カーソルを描画しているcanvasにidを付与するだけです。
CSSに設定されているz-indexが適用され、最前面に描画されます。

diff
1           plugins: {
2             tooltip: {
3             ～略～
4               enabled: false,
5               external: function(context) {
6                     ～略～
7                     context_.fillStyle = "red";
8                     context_.fill();
9+                    canvas_.id = "cursor";
10                }
11

②単純にビデオ>グラフ>カーソルの順に表示させると、ビデオの再生やシークができなくなります。

よってグラフの描画部分を一部に留めてコントロール部分を露出させれば再生できるのでしょうか？

コントロール部分を露出させれば再生コントロールは可能です。
再生コントロール部分でマウスを動かした際に、chartの方のカーソルが動かすようにするには、videoのエリアでmousemoveイベントを拾って、そのイベントをコピーしてchart側にdispatchすれば可能です。

投稿2021/09/23 13:26

退会済みユーザー

総合スコア0

退会済みユーザー

2021/09/27 08:23

ありがとうございます、CSSで定義したカーソルをさせることができました。またコントロール部分も露出させて、再生ボタン押すことはできました。再生コントロール部分でマウスの動きに連動させてchartのカーソルを動かす部分はまだですが、addEventListenerのtimeupdateイベントを取得して再生位置を取得するのかなと考えています。毎度ありがとうございます！

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