0

生の HTML ファイルで次のコードを正常に使用しています。

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Month', '2010', '2011', '2012'],
          ['Jun',  3139285, 3266244, 3121214],
          ['Jul',  3531094, 3349940, 3214951],
          ['Aug',  3231183,  3406815, 3335187],
        ]);
        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
            chart.draw(
              data,
              {vAxis: {minValue: 500000, maxValue: 4000000}}
            );
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 450px; height: 250px;"></div>
  </body>
</html>

しかし、Rails サイト ページで次のように同じ手法を使用しようとすると、うまくいきません。

index.html.erb:

<% content_for :head do %>
  <script type="text/javascript" src="https://www.google.com/jsapi"></script>
  <script type="text/javascript">
    google.load("visualization", "1", {packages:["corechart"]});
    google.setOnLoadCallback(drawChart);
    function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Month', '2010', '2011', '2012'],
        ['Jun',  3139285, 3266244, 3121214],
        ['Jul',  3531094, 3349940, 3214951],
        ['Aug',  3231183,  3406815, 3335187],
      ]);
      var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
          chart.draw(
            data,
            {vAxis: {minValue: 500000, maxValue: 4000000}}
          );
    }
  </script>
<% end %>
...
<div id="chart_div" style="width: 317px; height: 250px;"></div>

application.html.erb:

<head>
  ...
  <%= yield :head if yield :head %>
  ...
</head>

ここで何が間違っているのかわかりません。Google Charts API の使用に関して欠けているものはありますか? ドキュメントを読みましたが、これが生の HTML ファイルのように機能しない理由がわかりません。

4

0 に答える 0