Php 如何使用按钮切换两个图表
我有一个页面，需要比较饼图和条形图之间的2种不同数据，有2个按钮可以在它们之间切换，但它只在图表的1个上起作用Php 如何使用按钮切换两个图表,php,html,charts,google-visualization,Php,Html,Charts,Google Visualization,我有一个页面，需要比较饼图和条形图之间的2种不同数据，有2个按钮可以在它们之间切换，但它只在图表的1个上起作用 <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> // Load Charts and the corechart package. google.charts.
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
// Load Charts and the corechart package.
google.charts.load('current', {'packages':['corechart']});
// Draw the Sarah's chart when Charts is loaded.
google.charts.setOnLoadCallback(drawSarahChart);
// Draw the Anthony's chart when Charts is loaded.
google.charts.setOnLoadCallback(drawAnthonyChart);
// Callback that draws the chart for Sarah's.
function drawSarahChart() {
var chart = new google.visualization.ChartWrapper({
containerId: 'Sarah_chart_div'
});
var data = google.visualization.arrayToDataTable([
['Year','location'],
<?php
while($row=mysqli_fetch_array($res))
{
echo "['".$row["locationid"]."',".$row["number"]."],";
} ?>
]);
var options = {title:'FY 2018',
width:400,
height:300};
var barsButton = document.getElementById('b1');
var PieButton = document.getElementById('b2');
chart.setOptions(options);
function drawBars() {
chart.setChartType('ColumnChart');
chart.setDataTable(data);
chart.draw();
}
function drawPie() {
chart.setChartType('PieChart');
chart.setDataTable(data);
chart.draw();
}
barsButton.onclick = function () {
drawBars();
}
PieButton.onclick = function () {
drawPie();
}
drawBars();
}
// Callback that draws the chart for Anthony's.
function drawAnthonyChart() {
var chart = new google.visualization.ChartWrapper({
containerId: 'Anthony_chart_div'
});
// Create the data table for Anthony's pizza.
var data = google.visualization.arrayToDataTable([
['Year','location'],
<?php
while($row=mysqli_fetch_array($res2))
{
echo "['".$row["roleid"]."',".$row["number"]."],";
} ?>
]);
// Set options for Anthony's pie chart.
var options = {title:'FY 2019',
width:400,
height:300};
var barsButton = document.getElementById('b1');
var PieButton = document.getElementById('b2');
chart.setOptions(options);
function drawBars() {
chart.setChartType('ColumnChart');
chart.setDataTable(data);
chart.draw();
}
function drawPie() {
chart.setChartType('PieChart');
chart.setDataTable(data);
chart.draw();
}
barsButton.onclick = function () {
drawBars();
}
PieButton.onclick = function () {
drawPie();
}
drawBars();
}
</script>
<body>
<input type = 'button' id = 'b1' value = 'Draw Bar Chart' />
<input type = 'button' id = 'b2' value = 'Draw Pie Chart' />
<table>
<tr>
<td><div id="Sarah_chart_div" style="border: 1px solid #ccc"></div></td>
<td><div id="Anthony_chart_div" style="border: 1px solid #ccc"></div></td>
</tr>
</table>
</body>
</html>
//加载图表和corechart包。
load（'current'，{'packages'：['corechart']}）；
//加载图表时绘制Sarah图表。
google.charts.setOnLoadCallback（drawSarahChart）；
//加载图表时绘制安东尼图表。
google.charts.setOnLoadCallback（drawAnthonyChart）；
//为Sarah绘制图表的回调。
函数drawSarahChart（）{
var chart=new google.visualization.ChartWrapper({
集装箱船：“莎拉·海图·分区”
});
var data=google.visualization.arrayToDataTable([
[“年”，“地点]，
您可以初始化加载回调中的按钮，
并将图表类型传递给绘图函数
注意：我添加了硬编码数据以供示例使用，
您可以添加回您的php数据
请参阅以下工作片段
google.charts.load（'current'{
软件包：['corechart']
}).然后（函数（）{
var barsButton=document.getElementById（'b1'）；
var pieButton=document.getElementById（'b2'）；
barsButton.onclick=函数（）{
drawSarahChart（“柱形图”）；
图纸（“柱形图”）；
}
pieButton.onclick=函数（）{
drawSarahChart（“PieChart”）；
挂图（“挂图”）；
}
drawSarahChart（“柱形图”）；
图纸（“柱形图”）；
});
功能图SarahChart（图表类型）{
var chart=new google.visualization.ChartWrapper({
集装箱船：“莎拉·海图·分区”
});
var data=google.visualization.arrayToDataTable([
[‘年份’、‘地点’]，
[A'，100]，
[B'，120]
]);
变量选项={
标题：“2018财年”，
宽度：400，
身高：300
};
图表.设置选项（选项）；
chart.setChartType（chartType）；
图表.可设置数据表（数据）；
chart.draw（）；
}
函数绘图图表（图表类型）{
var chart=new google.visualization.ChartWrapper({
集装箱船：“Anthony_chart_div”
});
var data=google.visualization.arrayToDataTable([
[‘年份’、‘地点’]，
[A'，100]，
[B'，120]
]);
变量选项={
标题：“2019财年”，
宽度：400，
身高：300
};
var barsButton=document.getElementById（'b1'）；
var pieButton=document.getElementById（'b2'）；
图表.设置选项（选项）；
chart.setChartType（chartType）；
图表.可设置数据表（数据）；
chart.draw（）；
}
您可以初始化加载回调中的按钮，
并将图表类型传递给绘图函数
注意：我添加了硬编码数据以供示例使用，
您可以添加回您的php数据
请参阅以下工作片段
google.charts.load（'current'{
软件包：['corechart']
}).然后（函数（）{
var barsButton=document.getElementById（'b1'）；
var pieButton=document.getElementById（'b2'）；
barsButton.onclick=函数（）{
drawSarahChart（“柱形图”）；
图纸（“柱形图”）；
}
pieButton.onclick=函数（）{
drawSarahChart（“PieChart”）；
挂图（“挂图”）；
}
drawSarahChart（“柱形图”）；
图纸（“柱形图”）；
});
功能图SarahChart（图表类型）{
var chart=new google.visualization.ChartWrapper({
集装箱船：“莎拉·海图·分区”
});
var data=google.visualization.arrayToDataTable([
[‘年份’、‘地点’]，
[A'，100]，
[B'，120]
]);
变量选项={
标题：“2018财年”，
宽度：400，
身高：300
};
图表.设置选项（选项）；
chart.setChartType（chartType）；
图表.可设置数据表（数据）；
chart.draw（）；
}
函数绘图图表（图表类型）{
var chart=new google.visualization.ChartWrapper({
集装箱船：“Anthony_chart_div”
});
var data=google.visualization.arrayToDataTable([
[‘年份’、‘地点’]，
[A'，100]，
[B'，120]
]);
变量选项={
标题：“2019财年”，
宽度：400，
身高：300
};
var barsButton=document.getElementById（'b1'）；
var pieButton=document.getElementById（'b2'）；
图表.设置选项（选项）；
chart.setChartType（chartType）；
图表.可设置数据表（数据）；
chart.draw（）；
}
在您的代码中有额外的牵引杆（）；}
在饼图按钮之后。单击@fusionweb，在页面加载时不单击任何按钮即可显示图表？还是我做错了？我想在调用牵引杆后，您会得到额外的}
function@Fussionweb感谢您的及时回复，这是为了关闭“drawAnthonyChart”功能。在您的代码中有额外的牵引杆（）}
在饼图按钮之后。单击@fusionweb，在页面加载时不单击任何按钮即可显示图表？还是我做错了？我想在调用牵引杆后，您会得到额外的}
function@Fussionweb感谢您的及时回复，这是为了关闭“drawAnthonyChart”函数。谢谢！这正是我想要的。在旁注中，我如何添加工具栏以便可以作为csv和pdf导出/下载？检查这些答案-->&谢谢！这正是我想要的。在旁注中，我如何添加工具栏以便可以作为csv和pdf导出/下载？检查这些答案-->&