1

我正在尝试使用 google piechart api 制作饼图。我正在制作所有客户端（仅限 html 和 javascript）

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

<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 现在它的工作......我希望这个图表更花哨......我正在尝试根据谷歌文档对其进行动画处理......我应该在图表选项块中添加以下内容：>>动画：{>>持续时间：1000，缓动：'out'，但不知何故它不起作用我希望我的图表像以下链接中的图表一样动画：肚脐。 yourwildlife.org/explore-your-data 谷歌图表有可能吗？

4

1 回答 1

0

here is the js Fiddle link to your problem.

https://jsfiddle.net/b7rax1jc/

  1. while comparing values you use "==" and not "=" "=" is for assignment.

2.SampleVAL already contains the value of dropsown so you dont need to use SampleVAL.value when comparing

var Samplevalue =document.getElementById("SampleVAL").value;
if(Samplevalue == "ergo1")
于 2015-10-13T09:03:31.537 回答