Question

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

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

＆＃13;

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

＆＃13;

＆＃13; 问题是该图表没有加载，感谢@Sourabh Agrawal现在正在工作......我希望这个图表更像一个幻想...我试图根据谷歌文件制作它的动画。我应该在图表选项栏中添加以下内容：＆gt;＆gt;动画：{＆gt;＆gt;持续时间：1000，缓和：＆＃39; out＆＃39;，但不知何故它不起作用我想要我的将图表设置为以下链接中的图表：navels.yourwildlife.org/explore-your-data谷歌图表可以实现吗？

Answer 1

这是js Fiddle链接到你的问题。

https://jsfiddle.net/b7rax1jc/

在比较值时使用“==”而不是“=” “=”用于转让。

2.SampleVAL已经包含了Dropown的值，因此您在比较时不需要使用SampleVAL.value

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

在谷歌饼图中加载数据

1 个答案: