縦軸と横軸を入れ替える方法がわかりません。

前提・実現したいこと

PCを使用して、本体に保存されているCSVファイルを読み込んでwebページに波形を表示することを行っています。無事波形は表示されたのですが、縦軸にしたい方が横軸に、横軸にしたい方が縦軸になってしまい、入れ替える方法がわかりません。プログラムで設定することができるのか、CSVファイルの保存形式を変えることでできるのか、はたまたその他の要因があるのか教えていただきたいです。

該当のソースコード

使用言語はHTMLとJavaScriptです。

<html lang="ja"> <head> <meta charset="utf-8" /> <style> html, body, ＃container { width: 100%; height: 100%; } </style> <title>AnyChart from CSV File/title> </head> <body> <input type="file" name="file" id="file"> <div id="container"></div> <script src="https://cdn.anychart.com/js/latest/anychart-bundle.min.js"></script> <script src="https://cdn.anychart.com/releases/8.4.0/js/anychart-base.min.js" type="text/javascript"></script> <script src="https://cdn.anychart.com/releases/8.4.0/js/anychart-data-adapter.min.js"></script> <script> const file = document.getElementById('file'); if (window.File && window.FileReader && window.FileList && window.Blob) { file.addEventListener('change', function (e) { const reader = new FileReader(); reader.onload = function () { anychart.data.loadCsvFile(reader.result, function (data) { chart = anychart.bar(data); chart.title("AnyChart from CSV File"); chart.container("container").draw(); }); } reader.readAsDataURL(e.target.files[0]); }, false); } else { file.style.display = 'none'; result.innerHTML = 'File APIに対応したブラウザでご確認ください'; } </script> </body> </html>

CSVファイルの保存形式は、
1,0.12
2,0.13
3,0.14...
のように保存しています。

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

回答1件

ベストアンサー

単純に縦軸と横軸で使うデータを変えたいだけなら

html
1<html lang="ja">
2<head>
3<meta charset="utf-8" />
4<style>
5#container {
6  width: 100%;
7  height: 100%;
8}
9</style>
10<title>Real Chart</title>
11</head>
12<body>
13  <input type="file" name="file" id="file">
14  <div id="container"></div>
15  <script src="https://cdn.anychart.com/js/latest/anychart-bundle.min.js"></script>
16  <script src="https://cdn.anychart.com/releases/8.4.0/js/anychart-base.min.js" type="text/javascript"></script>
17  <script src="https://cdn.anychart.com/releases/8.4.0/js/anychart-data-adapter.min.js"></script>
18  <script>
19    const file = document.getElementById('file');
20    if (window.File && window.FileReader && window.FileList && window.Blob) {
21      file.addEventListener('change', function (e) {
22        const reader = new FileReader();
23        reader.onload = function () {
24          anychart.data.loadCsvFile(reader.result, function (data) {
25            data = data.split('\n').map(function(v) {
26              var wk = v.split(',');
27              return({x: wk[1], value: wk[0]});
28            });
29            chart = anychart.bar(data);
30            chart.title("AnyChart from CSV File");
31            chart.container("container").draw();
32          });
33        }
34        reader.readAsDataURL(e.target.files[0]);
35      }, false);
36    } else {
37      file.style.display = 'none';
38      result.innerHTML = 'File APIに対応したブラウザでご確認ください';
39    }
40  </script>
41</body>
42</html>