ローカルにあるcsvファイルを外部csvファイルと同じように読み込みたい

外部のcsvファイルを読み見込んでチャートにするjavascriptがあります。
下記のソースでチャートを描くことが可能です。
参考サイト
https://www.anychart.com/blog/2020/03/25/js-candlestick-chart-steps/

javascript
1<!DOCTYPE html>
2<html>
3
4<head>
5  <title>JavaScript Candlestick Chart</title>
6  <script src="https://cdn.anychart.com/releases/8.7.1/js/anychart-core.min.js" type="text/javascript"></script>
7  <script src="https://cdn.anychart.com/releases/8.7.1/js/anychart-stock.min.js" type="text/javascript"></script>
8  <script src="https://cdn.anychart.com/releases/8.7.1/js/anychart-data-adapter.min.js"></script>
9  <style>
10    html,
11    body,
12    #container {
13      width: 100%;
14      height: 100%;
15      margin: 0;
16      padding: 0;
17    }
18  </style>
19</head>
20
21<body>
22  <div id="container"></div>
23  <script>
24    anychart.onDocumentReady(function () {
25
26      // load data
27     anychart.data.loadCsvFile("https://static.anychart.com/git-storage/word-press/data/candlestick-chart-tutorial/EUR_USDHistoricalData2year.csv", function (data) {
28
29        // create a data table
30        var dataTable = anychart.data.table(0, 'MMM d, yyyy');
31        dataTable.addData(data);
32
33        // map data
34        var mapping = dataTable.mapAs({ 'open': 2, 'high': 3, 'low': 4, 'close': 1 });
35
36        // set the chart type
37        var chart = anychart.stock();
38
39        // set the series
40        var series = chart.plot(0).candlestick(mapping);
41        series.name("EUR USD Trade Data");
42
43        // set the chart title
44        chart.title("EUR USD Historical Trade Data");
45
46        // create a plot
47        var plot = chart.plot(0);
48        // create an EMA indicator with period 20
49        var ema20 = plot.ema(mapping, 20).series();
50        // set the EMA color
51        ema20.stroke('#bf360c');
52    
53        // disable the scroller axis
54        chart.scroller().xAxis(false);
55        // map "open" values for the scroller
56        openValue = dataTable.mapAs();
57        openValue.addField('value', 2);
58        // create a scroller series with the mapped data
59        chart.scroller().column(openValue);
60    
61        // modify the color of candlesticks making them black and white
62        series.fallingFill("black");
63        series.fallingStroke("black");
64        series.risingFill("white");
65        series.risingStroke("black");
66
67        // set the container id
68        chart.container('container');
69
70        // draw the chart
71        chart.draw();
72
73      });
74
75    });
76  </script>
77</body>
78
79</html>

やりたいこと
上記ではインターネット上にある外部のcsvファイルを拾う形でうまく表示されますが、
ローカルにcsvファイルを置いてそれを読み込みチャートを表示させたいと考えました。

そこでまずは、サンプルにあるcsvデータを自身のローカルに取り込んだ後、下記のソースで読み込ませました。

javascript
1<!DOCTYPE html>
2<html>
3
4<head>
5  <title>JavaScript Candlestick Chart</title>
6  <script src="https://cdn.anychart.com/releases/8.7.1/js/anychart-core.min.js" type="text/javascript"></script>
7  <script src="https://cdn.anychart.com/releases/8.7.1/js/anychart-stock.min.js" type="text/javascript"></script>
8  <script src="https://cdn.anychart.com/releases/8.7.1/js/anychart-data-adapter.min.js"></script>
9  <style>
10    html,
11    body,
12    #container {
13      width: 100%;
14      height: 100%;
15      margin: 0;
16      padding: 0;
17    }
18  </style>
19</head>
20
21<body>
22  <div id="container"></div>
23  <script>
24    anychart.onDocumentReady(function () {
25
26      // load data
27
28      anychart.data.loadCsvFile("./EUR_USDHistoricalData2year.csv", function (data) {
29
30        // create a data table
31        var dataTable = anychart.data.table(0, 'MMM d, yyyy');
32        dataTable.addData(data);
33
34        // map data
35        var mapping = dataTable.mapAs({ 'open': 2, 'high': 3, 'low': 4, 'close': 1 });
36
37        // set the chart type
38        var chart = anychart.stock();
39
40        // set the series
41        var series = chart.plot(0).candlestick(mapping);
42        series.name("EUR USD Trade Data");
43
44        // set the chart title
45        chart.title("EUR USD Historical Trade Data");
46
47        // create a plot
48        var plot = chart.plot(0);
49        // create an EMA indicator with period 20
50        var ema20 = plot.ema(mapping, 20).series();
51        // set the EMA color
52        ema20.stroke('#bf360c');
53    
54        // disable the scroller axis
55        chart.scroller().xAxis(false);
56        // map "open" values for the scroller
57        openValue = dataTable.mapAs();
58        openValue.addField('value', 2);
59        // create a scroller series with the mapped data
60        chart.scroller().column(openValue);
61    
62        // modify the color of candlesticks making them black and white
63        series.fallingFill("black");
64        series.fallingStroke("black");
65        series.risingFill("white");
66        series.risingStroke("black");
67
68        // set the container id
69        chart.container('container');
70
71        // draw the chart
72        chart.draw();
73
74      });
75
76    });
77  </script>
78</body>
79
80</html>

上記で動くことを期待しましたが意に反してチャートが描写されません。

どのようにすれば動くようになるかご教示いただきたくお願いいたします。

m.ts10806

2021/03/19 22:44

データはどこまで想定通り来ているのでしょうか。データがきているなら置き場所は関係ないはずです。デバッグしてみてください。

tajix_japan

2021/03/20 01:37

はい。webサーバーに置くことで解決しました。ローカル環境で試していたのが原因でした。お騒がせいたしました。よろしくお願いいたします。

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

回答1件

ベストアンサー

意に反してチャートが描写されません。

Webサーバを使わずに、ブラウザでhtmlファイルを直接開いてる場合、csvファイルのロードはクロスオリジンとみなされるため、ブロックされるようです。開発者ツールのコンソールにエラーメッセージが出ると思います(FirefoxとChromeで試しました)。
MDNの詳細解説

どうしてもWebサーバを使いたくない場合は、ページ内にtype="file"なinput要素を配置し、そこでcsvファイルを選択する、という手が使えそうな気がします。その場合は、loadCsvFile()の無名関数経由でdataを受け取る代わりに、FileReaderでファイルを読んでdataへ格納してあげれば良いと思います(試してませんが)。やり方が分からない場合は「javascript filereader」とかでググってみてください。

投稿2021/03/20 00:48