AnychartにてCSVを読み込み円グラフを表示させたい

前提・実現したいこと

Anychartを使用して、CSVファイルを読み込み円グラフを表示させたいのですが、
以下のソースコードをブラウザで開くと白い画面が表示され、何も表示されません。
もし解決方法などお分かりになる方、いらっしゃいましたら、
ご教示のほどよろしくお願い致します。

CSVファイル（pie.csv）

春,5
夏,7
秋,9
冬,12

該当のソースコード

<html>
  <head>
    <meta charset="utf-8" />
    <style>
      html, body, #container {
        width: 300px;
        height: 300px;
      }
    </style>
    <title>円グラフ</title>
  </head>
  <body>
    <div id="container"></div>

    <script src="https://cdn.anychart.com/js/latest/anychart-bundle.min.js"></script>
    <script>
    anychart.onDocumentReady(function () {
        anychart.data.loadCsvFile("pie.csv", function (data) {
            // 読み込まれたデータからチャートを作成する
            chart = anychart.pie(data);
            // タイトル
            chart.title("タイトル");
            // チャートを描く
            chart.container("container").draw();
        });
    });
    </script>
  </body>
</html>

試したこと

CSVを使用しない以下のコードでは問題なく円グラフが表示されます。

<html>
  <head>
    <meta charset="utf-8" />
    <style>
      html, body, #container {
        width: 300px;
        height: 300px;
      }
    </style>
    <title>円グラフ</title>
  </head>
  <body>
    <div id="container"></div>

    <script src="https://cdn.anychart.com/js/latest/anychart-bundle.min.js"></script>
    <script>
//円グラフ
anychart.onDocumentLoad(function() {

  var chart = anychart.pie([
    ["春", 32],
    ["夏", 28],
    ["秋", 20],
    ["冬", 20]
  ]);
  chart.title("AnyChart: Array of Arrays");
  chart.container("container").draw();
});
    </script>
  </body>
</html>

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

回答2件

ベストアンサー

本家サイトから

HTML
1<script src="https://cdn.anychart.com/releases/8.4.0/js/anychart-base.min.js" type="text/javascript"></script>
2<script src="https://cdn.anychart.com/releases/8.4.0/js/anychart-data-adapter.min.js"></script>

Loading CSV Fileによると

CSVファイルを読み込む機能は、 Data Adapterが提供する機能の1つです。
データアダプタで提供される機能を使用するには、AnyChartライブラリと一緒にプラグインする必要があります。

とあります。

投稿2018/10/17 07:07

miyakichi

総合スコア297

jam912sh

2018/10/17 07:15

miyakichi様、ご教示頂き有難うございます。上記修正を行い無事円グラフ表示できました！お忙しい中、お時間頂き有難うございました。大変助かりました！

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

ドキュメントの loadCsvFile()の Detailed description を読むと、データアダプターを使うにはanychart-data-adapter.min.js を読むように書いてあるので読み込みます。
するとanychart-base.min.jsも読むように怒られるので、結果こうなります。

HTML
1    <script src="https://cdn.anychart.com/releases/8.4.0/js/anychart-base.min.js"></script>
2    <script src="https://cdn.anychart.com/releases/8.4.0/js/anychart-data-adapter.min.js"></script>

https://cdn.anychart.com/releases/8.4.0/js/anychart-base.min.js
の代わりに
https://cdn.anychart.com/releases/8.4.0/js/anychart-bundle.min.js
でもいいようです。
https://docs.anychart.com/Quick_Start/Modules

投稿2018/10/17 07:22