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

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

新規登録して質問してみよう
ただいま回答率
85.35%
JavaScript

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

Q&A

解決済

1回答

1843閲覧

Javascriptでの、Promiseの処理と特定ライブラリの使用不可

Ry22434

総合スコア15

JavaScript

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

0グッド

0クリップ

投稿2021/04/10 16:02

編集2021/04/11 03:32

d3で読み込んだCSVファイルをDanfo.jsデータフレームに変換し、Chartjsで表示させています。
初期処理の際は問題がありませんが、HTML上で

"<select id = "select" onchange = "favTutorial()" > "

の処理を行い、データフレーム内の識別子を選択させてから、チャートを表示しようとすると、

"let query_df = df.query({ "column": "Name", "is": "==", "to": name })"

の部分でエラーが発生します。非同期処理でPromiseのresultを取得できていないのかと思い、あれこれデータフレームの取り出し等を試みましたが、できませんでした。そもそもDanfoで加工したデータを関数から取り出し、他の関数で使用した場合、df.queryの機能が使えないのかどちらの問題かはっきりしないです。
JSを始めてから初心者ですが、何日もハマっており、お助けいただけると幸いです。

イメージ説明

HTML

1{% load static %} 2<!DOCTYPE html> 3<html lang="en"> 4<head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <!-- CSS only --> 9 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous"> 10 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script> 11 <title>Real Time Graph app</title> 12</head> 13<body> 14 15 <div class="container"> 16 <div class="row"> 17 <div class="col-10 mx-auto mt-5"> 18 <canvas id="chart"></canvas> 19 <select id = "select" onchange = "favTutorial()" > 20 </select> 21 22 </div> 23 </div> 24 </div> 25 26 <!-- <div id="wrapper"> --> 27 <!-- </div> --> 28 29 <script src="https://unpkg.com/chartjs-plugin-colorschemes"></script> 30 <script src="https://cdn.jsdelivr.net/npm/danfojs@0.2.4/lib/bundle.min.js"></script> 31 <script src="https://d3js.org/d3.v5.js"></script> 32 <script src="{% static 'historical_chart.js' %}"></script> 33</body> 34</html> 35

Javascript

1function makedf(data) { 2 3 let cols = ["firstdayinweek", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday","Name"] 4 let df = new dfd.DataFrame(data, { columns: cols }) 5 let name = "China Securities 800" 6 7 makeChart(df,name) 8 9 let df_name_list = df['Name'].unique().values 10 let select = document.getElementById("select"); 11 let elmts = df_name_list 12 13 for (let i = 0; i < elmts.length; i++) 14 { 15 let optn = elmts[i]; 16 let el = document.createElement("option"); 17 el.textContent = optn; 18 el.value = optn; 19 select.appendChild(el); 20 }; 21 return df 22} 23 24function makeChart(df,name) { 25 // df = new dfd.read(df) 26 console.log(df) 27 let query_df = df.query({ "column": "Name", "is": "==", "to": name }) 28 let chart = new Chart('chart', { 29 type: "line", 30 options: { 31 plugins: { 32 colorschemes: { 33 scheme: 'brewer.Paired12' 34 } 35 } 36 }, 37 data: { 38 labels: query_df['firstdayinweek'].values, 39 datasets: [ 40 { 41 label: 'Monday', 42 data: query_df['Monday'].values, 43 // borderColor: "rgba(252,0,0,1)", 44 backgroundColor: "rgba(0,0,0,0)" 45 }, 46 { 47 label: 'Tuesday', 48 data: query_df['Tuesday'].values, 49 // borderColor: "rgba(255,0,0,1)", 50 backgroundColor: "rgba(0,0,0,0)" 51 }, 52 { 53 label: 'Wednesday', 54 data: query_df['Wednesday'].values, 55 // borderColor: "rgba(255,0,0,1)", 56 backgroundColor: "rgba(0,0,0,0)" 57 }, 58 { 59 label: 'Thursday', 60 data: query_df['Thursday'].values, 61 // borderColor: "rgba(255,0,0,1)", 62 backgroundColor: "rgba(0,0,0,0)" 63 }, 64 { 65 label: 'Friday', 66 data: query_df['Friday'].values, 67 // borderColor: "rgba(255,0,0,1)", 68 backgroundColor: "rgba(0,0,0,0)" 69 }, 70 ] 71 } 72 }); 73} 74 75 76var df_result = d3.csv("/static/Analysis_seasonality_of_stock_bond_index_daily_per_dayofweek.csv").then(makedf); 77 78 79function favTutorial() { 80var select = document.getElementById("myList"); 81name = document.getElementById("select").value; 82 83console.log(name) 84makeChart(df_result,name) 85} 86

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

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

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

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

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

guest

回答1

0

ベストアンサー

以下のように、danfo.DataFrame を上のスコープに置いてみてはどうでしょうか。
(タイミングによってはこれでもコケると思いますが……)

js

1let df; 2 3function makedf(data) { 4 5 let cols = ["firstdayinweek", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday","Name"] 6 df = new dfd.DataFrame(data, { columns: cols }) 7 8//... 9 10function favTutorial() { 11var select = document.getElementById("myList"); 12name = document.getElementById("select").value; 13 14console.log(name) 15makeChart(df,name) 16}

投稿2021/04/13 01:29

Lhankor_Mhy

総合スコア36960

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

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

Lhankor_Mhy

2021/04/15 02:10

解決しませんか? 何か難しいところがありますでしょうか? わからない点はコメント欄でご連絡ください。
Ry22434

2021/05/05 12:57

ありがとうございました。解決しました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問