你有程序显示LINE&柱形图。 现在我想要的是默认情况下应该显示折线图。 我已经实现了这一点。 但是点击按钮我希望该图表转换为柱形图。 所以我有两个java脚本代码在不同的功能,但我无法在它们之间切换。 图表刷新率也是1秒。
这是我的代码。
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.setOnLoadCallback(setInterval);</script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
var i = 11400;
var j = 11460;
var k = 11120;
var l = 11350;
setInterval(function drawChart() {
k=k-20;
l=l+5;
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2004', 1000, i++],
['2005', 1170, j--],
['2006', 660, k],
['2007', 1030, l]
]);
var options = {
title: 'Company Performance',
curveType: 'function',
legend: { position: 'bottom' }
};
var chart = new google.visualization.LineChart(document.getElementById('chart'));
chart.draw(data, options);
},1000)
</script>
<script type="text/javascript">
google.charts.load('current', {packages: ['corechart', 'bar']});
setInterval(function drawMaterial() {
var data = new google.visualization.DataTable();
data.addColumn('timeofday', 'Time of Day');
data.addColumn('number', 'Motivation Level');
data.addColumn('number', 'Energy Level');
data.addRows([
[{v: [8, 0, 0], f: '8 am'}, 1, .25],
[{v: [9, 0, 0], f: '9 am'}, 2, .5],
[{v: [10, 0, 0], f:'10 am'}, 3, 1],
[{v: [11, 0, 0], f: '11 am'}, 4, 2.25],
[{v: [12, 0, 0], f: '12 pm'}, 5, 2.25],
[{v: [13, 0, 0], f: '1 pm'}, 6, 3],
[{v: [14, 0, 0], f: '2 pm'}, 7, 4],
[{v: [15, 0, 0], f: '3 pm'}, 8, 5.25],
[{v: [16, 0, 0], f: '4 pm'}, 9, 7.5],
[{v: [17, 0, 0], f: '5 pm'}, 10, 10],
]);
var options = {
title: 'Motivation and Energy Level Throughout the Day',
hAxis: {
title: 'Time of Day',
format: 'h:mm a',
viewWindow: {
min: [7, 30, 0],
max: [17, 30, 0]
}
},
vAxis: {
title: 'Rating (scale of 1-10)'
}
};
var material = new google.charts.Bar(document.getElementById('chart'));
material.draw(data, options);
},1000)
</script>
</head>
<body>
<div id="chart" style="width: 550px; height: 350px"></div>
<button name="switch" value="switch">Switch Graph</button>
</body>
</html>