vueで、表示している複数グラフの中の１つをクリックしたらポップアップさせる方法

Question

実現したいこと

1. ＤＢに、果物マスタと売り上げデータがあるとする。
2. 画面の上部に、日付（範囲指定可能）と、果物の名前を選択する入力エリアがある。果物名は、予めマスタに登録済みで、複数選択可能。
3. 果物マスタには上限10種類まで登録済みで、それ以上はないとする。
4. 売り上げデータから指定した日付の選択された果物を条件にしてデータを取得する。
5. 果物ごとに売り上げデータをグラフ化する。
6. 8種類の果物が選ばれたら、８つのグラフを1画面に表示するイメージ。

以上までは、自力でどうにか実現できております。
ここからさらに、例えば4番目のグラフをクリックしたら、そのグラフだけを画面の中心に
大きめにポップアップ表示させたいです。

発生している問題・分からないこと

画面中のグラフのうち、どれか１つをクリックしたときに、
ポップアップ表示用の関数(showPopup　さらに　displayPopup)
が呼ばれるところまでは確認できましたが、グラフの中身がうまく渡っていないようで、
クリックしても画面上では無反応となります。

該当のソースコード

※グラフの定義部分の抜き出し
<v-row v-bind="rowStyle">
        <!-- 最大表示グラフ数は、10までとする  -->
        <v-col v-for="index in 10" :key="index" cols="12" md="6" lg="4" xl="3" >
            <!-- グラフコンポーネントの表示 -->
            <v-card class="chart-card" @click="showPopup(index - 1)">
                <v-card-text class ="v-card-text">
                    <div :id="generateChartContainerId(index - 1)" class="chart-container"></div>
                </v-card-text>
            </v-card>
        </v-col>
        <!-- ポップアップ -->
        <div v-if="popupVisible" class="popup" @click="closePopup">
            <div class="popup-content">
                <div class="popup-chart-container" ref="popupChart" id="popup-chart-container"></div>
            </div>
        </div>
</v-row>

※関連する部分だけを抜き出し

let popupVisible = false; // ポップアップ表示フラグ
let popupIndex = null; // 選択されたグラフのインデックス

// グローバルスコープでグラフのデータを管理する変数
let graphData = [];

// グラフクリック時の処理
async function showPopup(index)  {
    console.log(`Clicked on graph ${index + 1}`,graphData[index]);
    popupVisible = true;
    popupIndex = index;

    // グラフデータからクリックされたグラフに関連するデータを検索
    const popupGraphData = graphData[index];

    // ポップアップを表示する関数にデータを渡して呼び出す
    displayPopup(popupGraphData);
};


// ポップアップを表示する関数
async function displayPopup(popupGraphData)  {
    const matchingData = popupGraphData;//売り上げデータ
    const f_name = matchingData.f_name;//果物名

    // ポップアップ用の要素を取得
    const popupChartContainer = ref(popupChart);　←エラーになるところ
    console.log("----popupChartContainer----", popupChartContainer);

    // ポップアップ用のEChartsインスタンスを作成し、グラフを描画
    if (popupChartContainer) {
        // すでに初期化されたインスタンスがあれば破棄
        if (popupChartContainer.chart) {
            popupChartContainer.chart.dispose();
        }
        //グラフ描画処理の呼び出し
	drawChart2(f_name, popupChartContainer, matchingData);
        
    }

    // ポップアップを表示
    if (popupChartContainer) {
        popupChartContainer.style.display = 'block';
    }
};


// ポップアップを閉じる
async function closePopup()  {
    popupChartContainer.style.display = 'none'; // ポップアップを非表示
    // popupVisible = false;
    // popupIndex = null;
}

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

// ポップアップ用の要素を取得
const popupChartContainer = ref(popupChart);
この部分が原因の１つになっていると思います。
実際に、
「Uncaught (in promise) ReferenceError: popupChart is not defined」というエラーになります。
この不具合をどのように回避したらよいのかわかりません。

そもそも実現したいことへの私のアプローチが正しいのかもわからないため、
ご指摘いただけますとありがたいです。

補足

WEB開発も日が浅いので、試行錯誤の日々です。
Windows 10 Pro 22H2
vue 3.4.20
vuetify 3.5.6
ブラウザ chrome

Answer 1

refの用法を間違っている気がします。テンプレート上のrefプロパティとスクリプト上のrefの値を一致させる必要があります。変数処理用のrefに代入する初期値はnullにしておいて、refによって返された値を、テンプレート上のrefプロパティの値と同じpopupChartとしましょう。

vue公式の実例
テンプレート参照

Comments

[blue0524]

ご回答くださいまして、誠にありがとうございます！
確かにrefの用法をしっかり理解しておりませんでした・・・。
ご紹介しただいたサイトでも内容を確認しましたが、
自分のソースに置き換えて考えると、今一つ反映できずにいる次第です。

ご指摘部分の修正に合わせて、色々コードを調整したのですが、
まだまだ技量が足らずポップアップでグラフ表示まで至りません。

まず、templateでは、ref=popupChart とした場合に、
スクリプト側の部分ですが、ご教示いただいた内容で表した場合、
const aaa =ref(null);
const popupChart = ref(aaa);というコードになりますか？
aaaのところがどの部分になるのか、自分で書いておきながら堂々巡りしています。

以下は、書き直したコードになります。
今は、グラフ描画用の自作関数において引数として渡す項目の中の
コンテナがnullの状態なので関数でエラーになります。
refのpopupChart とコンテナの変数popupContainer　をどう設定すると
実現できるのか躓いています。

--------------------------------------------------------------------------------------
// ポップアップの表示状態を管理するリアクティブな変数
const popupVisible = ref(false);
const popupIndex = ref(-1);

// ポップアップ内の要素を参照するref
//まだ未完成の部分
const aaa =ref(null);
const popupChart = ref(aaa);

// グローバルスコープでグラフのデータを管理する変数
let graphData = [];

// グラフクリック時の処理
const showPopup = (index) => {

console.log(`Clicked on graph ${index + 1}`,graphData[index]);

// クリックされたグラフのインデックスを更新
popupIndex.value = index;

// ポップアップを表示
popupVisible.value = true;

// グラフ表示する関数にデータを渡して呼び出す
drawGraph(index);

};

// ポップアップを閉じる
const closePopup=()=> {
// popupChartContainer.style.display = 'none'; // ポップアップを非表示
popupVisible = false;
popupIndex = null;
}

// グラフを表示する関数
const drawGraph = (index) => {
console.log("----in drawGraph----");

// クリックされたグラフのデータを取得
let data = graphData[index];
console.log("graphData:",data)

const matchingData = data ;//売り上げデータ
const f_name = matchingData.f_name;//果物名

// グラフデータが初期化されているか確認
if (typeof graphData[index] !== 'undefined') {
// クリックされたグラフのデータを取得して描画
drawChart2(f_name, popupContainer, matchingData);
} else {
console.error('Graph data is not initialized.');
}
};
------------------------------------------------------------------------------
<その後に試したこと>
テンプレートに、
id="popup-graph"
を追記して、
const popupChartContainer = document.getElementById("popup-graph");
を追加しましたがconsole.logで見ると、popupChartContainer はnull でした・・・。

[FKM]

const popupChart = ref(null)
となります。また、スクリプト内で操作する際にはrefを使用した場合、一旦valueに代入しないと値を引き出すことができません。したがってpopupChart.valueとなるはず。
if (popupChart.value) {
のように、書き換える必要があります。

refはスクリプト内はvalueをつけて値を取得、テンプレート内はrefに紐づいたプロパティ名そのもので値を紐づけることになります。

[blue0524]

何度もご対応いただきありがとうございます。
指摘の部分について解決しました。
もっと場数を踏んで、スキルアップしたいと思います。
この度は本当にありがとうございました。