在 google 饼图中加载数据

Question

我正在尝试用 google 饼图 api 制作一个饼图。我正在做这一切客户端（仅 html 和 javascript）

当我的网页加载时，我想要做的是：用数据加载图表，但是当我通过下拉列表 select 一些其他主题时，它应该在图表中加载其他数据...

<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);
var Samplevalue =document.getElementById("SampleVAL").value;
function drawChart() {

  if(Samplevalue.value="ergo01")
  {
    var data = google.visualization.arrayToDataTable([
    ['Soort', 'Aantal'],
    ['Escherichia', 12.10],
    [' Ruminococcus', 6.44],
    ['Christensenellaceae', 6.15],
    ['Oscillospira', 13.20],
    ['Faecalibacterium', 15.50],
    ['Bacteroides', 3.07],
    ['Coprococcus', 1.02],
    ['Bacteroides', 1.00],
    ['Akkermansia', 0.81],
    ['Comamonas', 0.69]
                                                    ]);
  }

else if(Samplevalue.value="ergo02")
  {
    var data = google.visualization.arrayToDataTable([
    ['Soort', 'Aantal'],
    ['Escherichia', 25.10],
    [' Ruminococcus', 60.44],
    ['Christensenellaceae', 66.15],
    ['Oscillospira', 103.20],
    ['Faecalibacterium', 15.50],
    ['Bacteroides', 3.07],
    ['Coprococcus', 1.02],
    ['Bacteroides', 1.00],
    ['Akkermansia', 0.81],
    ['Comamonas', 0.69]
                                                  ]);
  }

else {
  var data = google.visualization.arrayToDataTable([
  ['Soort', 'Aantal'],
  ['Escherichia', 25.10],
  [' Ruminococcus', 60.44],
  ['Christensenellaceae', 66.15],
  ['Oscillospira', 103.20],
  ['Faecalibacterium', 15.50],
  ['Bacteroides', 3.07],
  ['Coprococcus', 1.02],
  ['Bacteroides', 1.00],
  ['Akkermansia', 0.81],
  ['Comamonas', 0.69]
    alert("hier");                                            ]);
    }


var options = {
title: 'My Daily Activities',

};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
</script>
<script>
function myFunction() {
    
    var e = document.getElementById("SampleVAL").value;
//var strUser = e.options[e.selectedIndex].value;
alert(e);
}

</script>
</head>
<body>
<div id="piechart" style="width: 900px; height: 500px;"></div>
<select id="SampleVAL" value="none">
  <option value="ergo01">sample1</option>
<option value="ergo02">sample2</option>
<option value="ergo03">sample3</option>
</select>
<button onclick="drawChart()">Try it</button>
</body>
</html>

问题是图表没有加载，多亏了@Sourabh Agrawal，它现在可以工作了……我希望这张图表更漂亮一点……我正在尝试根据 google 对其进行动画处理文档 .. 我应该在图表选项中添加以下内容：>>动画：{ >>持续时间：1000，缓动：'out'，但不知何故它不起作用我希望我的图表像中的图表一样动画以下 link：navels.yourwildlife.org/explore-your-data google 图表是否可行？

Answer 1

这是您的问题的 js Fiddle link。

https://jsfiddle.net/b7rax1jc/

比较值时使用“==”而不是“=” “=”用于赋值。

2.SampleVAL 已经包含了 dropown 的值，所以在比较

时不需要使用 SampleVAL.value

var Samplevalue =document.getElementById("SampleVAL").value;
if(Samplevalue == "ergo1")

在 google 饼图中加载数据

load data in google piechart

html

javascript

google-pie-chart