如何传递html标记';谷歌图表数据表的内容

如何传递html标记';谷歌图表数据表的内容,html,jquery-ui,charts,Html,Jquery Ui,Charts,我正在尝试在我的网页中添加谷歌饼图。我将计算结果存储在几个html span标记中。 如何将这些值传递到GoogleChart,以便相应地绘制饼图字符 <div id="emission"> <div>Air Travel: <span id="airtotalresult"></span></div> <div>Ground Travel: <span id="groundtotalresul

我正在尝试在我的网页中添加谷歌饼图。我将计算结果存储在几个html span标记中。 如何将这些值传递到GoogleChart,以便相应地绘制饼图字符

    <div id="emission">
    <div>Air Travel: <span id="airtotalresult"></span></div>
    <div>Ground Travel: <span id="groundtotalresult"></span></div>
    <div>Home Energy: <span id="hometotalresult"></span></div>
    <div>Diet: <span id="diettotalresult"></span></div>
    <div>Expenditure:<span id="shoppingtotalresult"></span> </div>
    <div>Waste: <span id="wastetotalresult"></span></div>

     <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">

    // Load the Visualization API library and the piechart library.
    google.load('visualization', '1.0', {'packages':['corechart']});
    google.setOnLoadCallback(drawChart);
        // ... draw the chart...
    </script>

航空旅行:
地面行程:
家庭能源:
饮食:
支出:
废物:
//加载可视化API库和piechart库。
load('visualization','1.0',{'packages':['corechart']});
setOnLoadCallback(drawChart);
// ... 绘制图表。。。

谢谢。

您可以根据谷歌教程制作饼图

对于平面饼图,将此添加到头部

<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([
      ['option 1', 'Hours per Day'],
      ['option 2',     11],
      ['option 3',      2],
      ['option 4',  2],
      ['option 5', 2],
      ['option 6',    7] //name and the data
    ]);

    var options = {
      title: 'chart name' //name of the chart
    };

    var chart = new google.visualization.PieChart(document.getElementById('piechart'));
    chart.draw(data, options);
  }
</script>

load(“可视化”、“1”、{packages:[“corechart”]});
setOnLoadCallback(drawChart);
函数绘图图(){
var data=google.visualization.arrayToDataTable([
[“选项1”,“每天工作小时数”],
[‘选择2',11],
[‘选项3’,2],
[‘选项4’,2],
[‘选项5’,2],
['option 6',7]//名称和数据
]);
变量选项={
标题:“图表名称”//图表的名称
};
var chart=new google.visualization.PieChart(document.getElementById('PieChart');
图表绘制(数据、选项);
}
然后把这个贴在身体上

<div id="piechart" style="width: 900px; height: 500px;"></div>