RailsアプリにGoogle円グラフを含めようとしていますが、特に奇妙なエラーだと思うものに遭遇しました。
問題は、数値を入力するとグラフが完全に表示されることです（2つの入力数値を合計に等しい円の2つのコンポーネントとして表示します）が、動的データをフィードしようとすると、データを取得するように見えますが、正しく使用しないでください。代わりに、空白のグラフに2つの数値をスライバーとして表示します。コード例：
これは完全に機能し、正しい値（下の販売と左）を持つきれいな円グラフに変わります。
<div id="chart_div"></div>
<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 sold = 406;
var left = 38;
var data = google.visualization.arrayToDataTable([
['Pounds', 'Sold/Left'],
['Pounds Sold', sold],
['Left', left]
]);
var options = {
};
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
ただし、これにより、（この場合は）まったく同じ数値（406および38）を示すホバー付きのグラフが生成されますが、2つのグラフセクションは非常に小さく、グラフのボリュームの約1％を占めます（理想的な100％）。チャートの残りの99％は空白です：
<div id="chart_div" data-sold=<%= @animal.pounds_sold.to_i %> data-left=<%= @animal.pounds_left.to_i %> ></div>
// Here, the numbers equal 406 and 38, as in the above.
<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 sold = $(document).find('#chart_div').attr('data-sold');
var left = $(document).find('#chart_div').attr('data-left');
var data = google.visualization.arrayToDataTable([
['Pounds', 'Sold/Left'],
['Pounds Sold', sold],
['Left', left]
]);
var options = {
};
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
考えられる手がかりの1つは、このエラーチャートのセクションにカーソルを合わせると、ホバーは正しい数値（406、38）を示していますが、残りのセクションはパイの1％と0.2％しか占めていないことを示しています。パイのは空白です（ホバー/ホバー値はありません）。
ここで何が起こっているのかアイデアはありますか？私はjavascript/jqueryの犯罪を犯していると推測しています。なぜなら、私はそれにかなり慣れていないからですが、何がわからないのです。
ありがとう！
編集-別の奇妙なこと。私は、動的な数値と直線的な数値の両方を使用したハイブリッドシナリオで何が起こるかを確認しようとしました。つまり、上記の動的なバージョンに対する以下の変更です。
...
var other = 50;
var sold = $(document).find('#chart_div').attr('data-sold');
var left = $(document).find('#chart_div').attr('data-left');
var data = google.visualization.arrayToDataTable([
['Pounds', 'Sold/Left'],
['Pounds Sold', sold],
['Left', left],
['Test', other]
]);
...
これは、（私にとっては）不可解なことに、チャートがまったくないことにつながりました。