Cahrt.js 散布図プロットの表示/非表示を切り替えれるようにしたい

前提・実現したいこと

Chart.jsを使用して散布図を作成したい。

Chart.jsで作成した散布図のデータ一部をcanvas上から見えなくしたい（ボタンなどで切り替え）のですが、hidden属性を設定してもイメージの動作にならずアドバイスをいただきたいです。

hidden属性には配列を収めることはできないのでしょうか？

該当のソースコード

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas id="myChart"></canvas>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/moment@2.24.0/min/moment.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
    <script src="https://cdn.jsdelivr.net/npm/hammerjs@2.0.8"></script>

    <script>
        var myChart;
        myChart = new Chart(document.getElementById('myChart').getContext('2d'), {
            type: 'scatter',
            data: {
                datasets: [{
                    label: 'Scatter Dataset',
                    data: {
                        datasets:[{
                            label: 'data A',
                            data: [{
                                x: 10,
                                y: 20
                            },{
                                x: 15,
                                y: 10
                            },{
                                x: 10,
                                y: 10
                            }],
                            hidden: false
<!-- 理想は hidden: [true, false, true] のような指定方法-->
                            },{
                            label: 'data B',
                            data: [{
                                x: 8,
                                y: 11
                            }, {
                                x: 6,
                                y: 6
                            }, {
                                x: 12,
                                y: 10
                            }],
                            hidden: false
<!-- 理想は hidden: [false, true, false] のような指定方法-->
                        }]
                     }
                }]
            },
            options: {
                scales: {
                    xAxes: [{
                        type: 'linear',
                        position: 'bottom'
                    }]
                },
                onHover: function(e){
                    var item = myChart.getElementAtEvent(e1759248);
                    if (item.lengh && item[0]['_option'].radius != 0){
                         
                    }
                }
            }
        });
        </script>    
</body>
</html>

試したこと

プロット自体のサイズを0にすれば見えなくはなりますが、onHoverは反応してしまいます。
onHoverの関数内でradius == 0を除外対象としましたが依然としてなぜか反応してしまいます。

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

回答2件

自己解決

プロットデータのradius属性について全て0にすることでグラフ上からプロットを消すことはできました。
その他、radiusを0にしていてもtooltipが反応してしまう問題に対しては

options: {
 tooltips:{
   filter: function(e){
     return (Chart.config.date.datasets[e.datasetIndex].radius[e.index] != 0);
   }
 }
}

を加えて対処をいたしました。
また、プロットクリック時の操作に関してもクリックイベントの中でradiusのデータを取り出して0か否かを判断させるコードを追加しました。

投稿2021/02/27 07:06

EiAma

総合スコア15

もっとシンプルな方法もあるかもしれませんが、条件分岐でグラフを切り替えて表示させる方法ではいかがでしょうか？データAのみ見えなくするボタン（グラフA）、データBのみ見えなくさせるボタン（グラフB)、、、といったようにラジオボタンを用意してグラフを切り替えるというものです。
切り替えのためのjavascriptは例えば以下のようになります。（そしてmyChartに相当する、A,B,Cそれぞれのグラフを表示させる構文を用意する）
function formSwitch() {
radio=document.getElementsByName('graph')
if(radio[0].checked){
document.getElementById('A').style.display = "";
document.getElementById('B').style.display = "none";　
document.getElementById('C').style.display ="none";

　　　　 }else if(radio[1].checked){...

投稿2020/11/15 14:33

Uka

総合スコア28

EiAma

2020/11/15 15:11

Uka様、ご回答くださりありがとうございます。想定していたデータセットの形が異なっていたためコードの編集をさせていただきました。 Uka様のご提案くださった方法は更新したデータセットの形へも対応可能でしょうか？ご意見くださりますようお願いいたします。

Uka

2020/11/15 23:26

データセットを見えなくさせる方法としては、データセットの中でbackgroundColorやborderColorオプションを指定してrgbを透明に設定することで見えなくするすることはできないでしょうか？

EiAma

2020/11/16 16:39

Uka様ご返答くださりありがとうございます。似たような形でborderradiusを0にする形でグラフ上からは見えなくする事はできました。そのような場合でもonHover関数を設定しているため、グラフ上の何も（見え）ないところでツールチップが表示されてしまうことがあり、プロットを一時的に無効化するような対処法があればと思いご質問させていただきました。こちらの情報提供量不足で申し訳ありません。

Uka

2020/11/17 01:06 編集

該当のソースコードにonhover関数が見当たらないため、どのように使用されているのかがわからないのですが、ご提案させていただいたラジオボタンと透明色による設定であれば、プロットの無効化が可能ではないかと思った次第です。意図と違うようでしたら申し訳ありません。

EiAma

2020/11/20 13:03

Uka様、大変申し訳ありません。 onhover関数をソースコードに含めておらず、実行させたいプログラム像を伝え切れていない表記となってしまっておりました。ご丁寧に提案をくださりありがとうございました。

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

あなたの回答