[解決済み] Googleの折れ線グラフを描画すると、curveTypeが設定されず、アニメーションが期待通りに動作しない

質問

googleの折れ線グラフを描いているのですが、うまくいきます。チャートは正しいデータで描画されます。しかし、curveTypeのオプションを変更しようとすると、'function'オプションが直線から曲線に変更されません。また、アニメーション関数も全く機能しません。何か見落としているのでしょうか？これは私のコードです。

google.charts.load('current', {
     'packages': ['line']
 });
 google.charts.setOnLoadCallback(drawChart);

     function drawChart() {
  var data = google.visualization.arrayToDataTable([
      ['Year', 'Number']
      , ['2005',    61372]
      , ['2006',    65425]
      , ['2007',    71389]
         , ['2008', 75173]
         , ['2009', 75554]
         , ['2010', 75174]
         , ['2011', 74033]
         , ['2012', 72225]
         , ['2013', 68954]
         , ['2014', 67462]
     , ])
 }; 
 var options = { 
    animation:{
    duration: 1000,
    easing: 'out',
  },  curveType: 'function'
     , smoothline: 'true'
     , width: 875
     , height: 400
     , legend: {position: 'none'}
 };
 var chart = new google.charts.Line(document.getElementById('number_chart'));
 chart.draw(data, options);
 }

解決方法は？

上記のコードにいくつかのエラーがありますが、より大きなブロックコードからのカットアンドペーストが原因でしょうか？

しかし、それはさておき、これらの機能が動作しない根本的な原因は 'line' を読み込んでいるパッケージと google.charts.Line(...) オブジェクトを使用することで、Google が言うところの マテリアルチャート . これは Google Visualization API の実装を Google の "Material Design" 仕様に準拠して完全に再設計したもので、現在まだベータ版です (詳細はこちら)。 こちら ). クラシックと呼ばれるチャート・ライブラリの機能の多くは、まだマテリアルデザイン・チャートには引き継がれていません ( このGithubの問題 と注意書きがあります。 animation.* と curveType はいずれも現在未対応です。

とにかく、以下のように古い（しかしサポートはずっと良い）Google Visualization "Classic" corechart パッケージを使うことで問題を解決することができます。

/* Load "Classic" Google Visualization API corechart package */
    google.charts.load('current', {
      'packages': ['corechart']
    });
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Year', 'Number'],
        ['2005', 61372],
        ['2006', 65425],
        ['2007', 71389],
        ['2008', 75173],
        ['2009', 75554],
        ['2010', 75174],
        ['2011', 74033],
        ['2012', 72225],
        ['2013', 68954],
        ['2014', 67462],
      ]);

      var options = {
        animation: {
          startup: true,   /* Need to add this for animations */
          duration: 1000,
          easing: 'out',
        },
        curveType: 'function',
        //smoothline: 'true',   /* What does this do? */
        //width: 875,    /* Better to specify size of containing DIV? */
        //height: 400,
        legend: {
          position: 'none'
        },
        vAxis:{    /* You may wish to add this to make curve animations appear from the bottom of the chart */
          baseline: 60000,
        }
      };

/* Create instance of "Classic" Visualization Line Chart  */
      var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
      chart.draw(data, options);
    }

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="curve_chart"></div>

お役に立てれば幸いです。

アダム

追記編集しました。なぜか、埋め込まれた "Run Code Snippet" でチャートが実行されないのですが (Win 7 で最新の Chrome を使用しています)、コードは他の場所で問題なく動作するはずです。