Javascript 谷歌图表（饼图）在给定动态数据时仅显示碎片

我试图在我的Rails应用程序中包含一个，但我遇到了一个我认为特别奇怪的错误

问题是，当我输入数字时，图表显示得非常完美（将我的两个输入数字显示为一个饼图的两个组成部分，等于它们的总和），但当我尝试向它提供动态数据时，它似乎拾取了数据，但没有正确地使用数据——而是将这两个数字显示为空白图表中的碎片。代码示例：

这非常有效，可以变成一个漂亮的饼图，具有正确的值（已售出和左侧，如下所示）：

---

（对我来说）令人费解的是，这导致了根本没有图表。

我认为问题在于您将每条细条的“值”指定为一个字符串。尝试将它们定义为

INT

，您的饼图应该可以工作

<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>

<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>

...
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]
]);
...