私はGoogleの円グラフ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>