chart.jsで散布図を描写できない

chart.jsにトライしています。

javascriptでCSVファイルを読み込んで公式ドキュメントを参考に、散布図を出力しようとしています。

CSVファイルは、同じ階層のディレクトリに配置しており、カラムは2列で設定しています。
コンソールを確認する限り、データ自体は取れているようですが、それをグラフに描画できていないです。

公式ドキュメントには、データを手打ちしたバージョンしか書いてなく、いまいちどうすれば良いのか悩んでいます。
CSVファイルを見ながら、僕も手打ちするしかないのでしょうか。

お知恵を拝借できればと考えています。
また、ローカルのCSVファイルをゲットして変数に突っ込むわかりやすいやり方を書いてあるサイトなどありましたら、教えていただけると嬉しいです....

javascript
1<!DOCTYPE html>
2<html lang="en" dir="ltr">
3  <head>
4    <meta charset="utf-8">
5    <title>テンプレート</title>
6    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
7    <script src="https://d3js.org/d3.v4.min.js"></script>
8
9  </head>
10  <body>
11    <canvas id="myChart" width="400" height="400"></canvas>
12
13    <script type="text/javascript">
14
15      var csv2 = d3.csv("2017_2.csv",function(error,data){
16            if(error){
17              console.log(error);
18            }else{
19              console.log(data);
20            }
21      });
22
23      var ctx = document.getElementById("myChart");
24      var myChart = new Chart(ctx,{
25        type:"scatter",
26        datasets:[{
27          label:"実験",
28          data: [csv2],
29        }]
30      })
31
32    </script>
33  </body>
34</html>

csv
1"Happiness.Score","Economy..GDP.per.Capita."
2"7.53700017929077","1.61646318435669"
3"7.52199983596802","1.48238301277161"
4"7.50400018692017","1.480633020401"
5"7.49399995803833","1.56497955322266"
6"7.4689998626709","1.44357192516327"
7"7.3769998550415","1.50394463539124"
8"7.31599998474121","1.47920441627502"
9"7.31400012969971","1.40570604801178"
10"7.28399991989136","1.49438726902008"
11"7.28399991989136","1.484414935112"
12"7.21299982070923","1.37538242340088"
13"7.0789999961853","1.10970628261566"
14"7.00600004196167","1.48709726333618"
15"6.99300003051758","1.54625928401947"
16"6.97700023651123","1.53570663928986"
17"6.95100021362305","1.48792338371277"
18"6.89099979400635","1.46378076076508"
19"6.86299991607666","1.74194359779358"
20"6.71400022506714","1.44163393974304"
21"6.65199995040894","1.25278460979462"
22"6.64799976348877","1.62634336948395"
23"6.63500022888184","1.10735321044922"
24"6.60900020599365","1.35268235206604"
25"6.59899997711182","1.18529546260834"
26"6.57800006866455","1.15318381786346"
27"6.57200002670288","1.69227766990662"
28"6.52699995040894","1.34327983856201"
29"6.4539999961853","1.21755969524384"
30"6.4539999961853","0.872001945972443"
31"6.4520001411438","1.23374843597412"
32"6.44199991226196","1.43092346191406"
33"6.42399978637695","1.12786877155304"
34"6.42199993133545","1.43362653255463"
35"6.40299987792969","1.38439786434174"
36"6.375","1.87076568603516"
37"6.35699987411499","1.07062232494354"
38"6.3439998626709","1.53062355518341"
39"6.16800022125244","1.36135590076447"
40"6.10500001907349","1.63295245170593"
41"6.09800004959106","1.32539355754852"
42"6.08699989318848","1.48841226100922"
43"6.08400011062622","1.29121541976929"
44"6.07100009918213","0.737299203872681"
45"6.00799989700317","1.00082039833069"
46"6.00299978256226","0.909784495830536"
47"5.97300004959106","1.29178786277771"
48"5.97100019454956","0.786441087722778"
49"5.96400022506714","1.39506661891937"
50"5.96299982070923","1.28177809715271"
51"5.95599985122681","0.907975316047668"
52"5.92000007629395","1.41691517829895"
53"5.90199995040894","1.31458234786987"
54"5.87200021743774","1.09186446666718"
55"5.84999990463257","1.26074862480164"
56"5.83799982070923","1.40167844295502"
57"5.83799982070923","0.728870630264282"
58"5.82499980926514","1.21768391132355"
59"5.82299995422363","0.833756566047668"
60"5.82200002670288","1.13077676296234"
61"5.81899976730347","1.28455626964569"
62"5.80999994277954","1.3469113111496"
63"5.75799989700317","1.3412059545517"
64"5.71500015258789","1.03522527217865"
65"5.62900018692017","1.18939554691315"
66"5.62099981307983","1.35593807697296"
67"5.61100006103516","1.32087934017181"
68"5.56899976730347","1.15655755996704"
69"5.52500009536743","1.10180306434631"
70"5.5","1.19827437400818"
71"5.49300003051758","0.932537317276001"
72"5.47200012207031","1.55167484283447"
73"5.42999982833862","0.85769921541214"
74"5.39499998092651","1.06931757926941"
75"5.33599996566772","0.991012394428253"
76"5.32399988174438","1.2860119342804"
77"5.31099987030029","0.925579309463501"
78"5.29300022125244","1.22255623340607"
79"5.27899980545044","0.951484382152557"
80"5.27299976348877","1.08116579055786"
81"5.26900005340576","0.72688353061676"
82"5.26200008392334","0.995538592338562"
83"5.25","1.12843120098114"
84"5.23699998855591","1.12112903594971"
85"5.2350001335144","0.878114581108093"
86"5.23400020599365","1.15360176563263"
87"5.23000001907349","1.07937383651733"
88"5.22700023651123","1.28948748111725"
89"5.22499990463257","1.07498753070831"
90"5.19500017166138","1.3151752948761"
91"5.18200016021729","0.982409417629242"
92"5.18100023269653","0.730573117733002"
93"5.17500019073486","1.06457793712616"
94"5.15100002288818","0.0226431842893362"
95"5.07399988174438","0.788547575473785"
96"5.07399988174438","0.783756256103516"
97"5.04099988937378","0.524713635444641"
98"5.01100015640259","0.885416388511658"
99"5.00400018692017","0.596220076084137"
100"4.96199989318848","0.479820191860199"
101"4.95499992370605","1.02723586559296"
102"4.8289999961853","1.05469870567322"
103"4.80499982833862","1.00726580619812"
104"4.77500009536743","0.716249227523804"
105"4.7350001335144","0.989701807498932"
106"4.71400022506714","1.1614590883255"
107"4.70900011062622","0.36842092871666"
108"4.69500017166138","0.564305365085602"
109"4.69199991226196","1.15687310695648"
110"4.64400005340576","0.996192753314972"
111"4.60799980163574","0.586682975292206"
112"4.57399988174438","0.964434325695038"
113"4.55299997329712","0.560479462146759"
114"4.55000019073486","0.234305649995804"
115"4.54500007629395","0.367110550403595"
116"4.53499984741211","0.479309022426605"
117"4.51399993896484","0.636406779289246"
118"4.49700021743774","1.10271048545837"
119"4.46500015258789","1.1982102394104"
120"4.46000003814697","0.339233845472336"
121"4.44000005722046","1.00985014438629"
122"4.37599992752075","0.900596737861633"
123"4.31500005722046","0.792221248149872"
124"4.29199981689453","0.648457288742065"
125"4.29099988937378","0.808964252471924"
126"4.28599977493286","0.950612664222717"
127"4.28000020980835","0.0921023488044739"
128"4.19000005722046","0.476180493831635"
129"4.17999982833862","0.603048920631409"
130"4.16800022125244","0.601765096187592"
131"4.13899993896484","0.65951669216156"
132"4.11999988555908","0.667224824428558"
133"4.09600019454956","0.89465194940567"
134"4.08099985122681","0.381430715322495"
135"4.03200006484985","0.3502277135849"
136"4.02799987792969","0.161925330758095"
137"3.97000002861023","0.233442038297653"
138"3.93600010871887","0.438012987375259"
139"3.875","0.375846534967422"
140"3.80800008773804","0.521021246910095"
141"3.79500007629395","0.858428180217743"
142"3.79399991035461","0.401477217674255"
143"3.76600003242493","1.12209415435791"
144"3.65700006484985","0.431085407733917"
145"3.64400005340576","0.305808693170547"
146"3.6029999256134","0.368610262870789"
147"3.59299993515015","0.591683447360992"
148"3.59100008010864","0.39724862575531"
149"3.53299999237061","0.119041793048382"
150"3.50699996948242","0.244549930095673"
151"3.49499988555908","0.305444717407227"
152"3.47099995613098","0.368745893239975"
153"3.46199989318848","0.777153134346008"
154"3.34899997711182","0.511135876178741"
155"2.90499997138977","0.091622568666935"
156"2.69300007820129","0"

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

回答1件

こんな感じかな
※ローカルファイルで(内容は投稿のCSV部分と同じ)CSV選択でやってます

html
1<!DOCTYPE html>
2<html lang="en" dir="ltr">
3  <head>
4    <meta charset="utf-8">
5    <title>テンプレート</title>
6    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
7    <script src="https://d3js.org/d3.v4.min.js"></script>
8  </head>
9  <body>
10    <div class="chart-container" style="position: relative; height:400px; width:400px">
11      <canvas id="myChart"></canvas>
12    </div>
13    <input type="file" id="input" onchange="handleFiles(this.files)">
14    
15    <script type="text/javascript">
16      // 先にチャート作成しておく
17      var ctx = document.getElementById("myChart");
18      var myChart = new Chart(ctx,{
19        type:"scatter",
20        data: {
21          datasets:[{
22            label:"実験",
23            data: [],
24          }]
25        },
26        options: {
27          responsive: true,
28          maintainAspectRatio: false
29        }
30      });
31      
32      function handleFiles(files) {
33        var objectURL = window.URL.createObjectURL(files[0]);
34        var csv2 = d3.csv(objectURL, function(error, data) {
35          if(error){
36            console.log(error);
37          } else {
38            // データを作り直す
39            var list = data.map(v => {
40              // x, yに書き換える＆数値に
41              return({x: v['Happiness.Score'] - 0, y: v['Economy..GDP.per.Capita.'] - 0});
42            });
43            
44            // データを入れ直す
45            myChart.data.datasets[0].data = list;
46            
47            // グラフ更新
48            myChart.update();
49          }
50        });
51        
52      }
53    </script>
54  </body>
55</html>