如何在相同的HTML上绘制2个谷歌图表
我正在尝试下面的代码，但它只显示第一个图表。
请问我哪里出错了。我试图做很多改变但仍然没有运气。
我只获得单张图表，如下图所示：
enter code here
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {
callback: function () {
drawChart()
window.addEventListener('resize', drawChart, false)
},
packages:['corechart', 'table']
})
function drawChart() {
var data = google.visualization.arrayToDataTable([
['TIME', 'SQL_ID','SMPL']
, [new Date(2017,5,01,09,59),'NO_SQL',1]
, [new Date(2017,5,01,09,59),'6f02ugbcuw469',1]
, [new Date(2017,5,01,09,59),'2ffdrqqfyz60w',3]
, [new Date(2017,5,01,10,00),'bpmkc2j8mh7k0',2]
, [new Date(2017,5,01,10,00),'037z3fuxqsxyr',1]
, [new Date(2017,5,01,10,00),'NO_SQL',9]
, [new Date(2017,5,01,10,00),'NO_SQL',2]
, [new Date(2017,5,01,10,01),'NO_SQL',1]
, [new Date(2017,5,01,10,01),'037z3fuxqsxyr',15]
, [new Date(2017,5,01,10,01),'NO_SQL',1]
, [new Date(2017,5,01,10,01),'NO_SQL',1]
, [new Date(2017,5,01,10,01),'NO_SQL',2]
, [new Date(2017,5,01,10,01),'NO_SQL',1]
, [new Date(2017,5,01,10,01),'NO_SQL',5]
, [new Date(2017,5,01,10,01),'NO_SQL',8]
, [new Date(2017,5,01,10,01),'6f02ugbcuw469',1]
, [new Date(2017,5,01,10,01),'2ffdrqqfyz60w',4]
, [new Date(2017,5,01,10,01),'bpmkc2j8mh7k0',15]
, [new Date(2017,5,01,10,01),'NO_SQL',6]
, [new Date(2017,5,01,10,01),'6f02ugbcuw469',6]
, [new Date(2017,5,01,10,01),'NO_SQL',1]
, [new Date(2017,5,01,10,01),'NO_SQL',1]
, [new Date(2017,5,01,10,01),'NO_SQL',1]
, [new Date(2017,5,01,11,58),'NO_SQL',1]
, [new Date(2017,5,01,11,59),'NO_SQL',1]
, [new Date(2017,5,01,11,59),'037z3fuxqsxyr',1]
, [new Date(2017,5,01,11,59),'bpmkc2j8mh7k0',1]
, [new Date(2017,5,01,11,59),'2ffdrqqfyz60w',12]
, [new Date(2017,5,01,11,59),'NO_SQL',1]
, [new Date(2017,5,01,11,59),'6f02ugbcuw469',7]
, [new Date(2017,5,01,11,59),'6f02ugbcuw469',1]
, [new Date(2017,5,01,11,59),'037z3fuxqsxyr',15]
, [new Date(2017,5,01,11,59),'bpmkc2j8mh7k0',15]
, [new Date(2017,5,01,12,00),'037z3fuxqsxyr',3]
, [new Date(2017,5,01,12,00),'2ffdrqqfyz60w',4]
, [new Date(2017,5,01,12,00),'NO_SQL',1]
, [new Date(2017,5,01,12,00),'6f02ugbcuw469',1]
, [new Date(2017,5,01,12,00),'bpmkc2j8mh7k0',5]
, [new Date(2017,5,01,12,00),'6f02ugbcuw469',4]
, [new Date(2017,5,01,12,00),'NO_SQL',2]
])
var colorPallette = ['#273746','#707B7C','#dc7633','#f1c40f','#1e8449','#2874a6','#6c3483','#922b21']
var wValues = data.getDistinctValues(1)
var viewColumns = [0]
var aggColumns = []
wValues.forEach(function (SQL_ID, index) {
viewColumns.push({
calc: function (dt, row) {
var wValue = null
if (dt.getValue(row, 1) === SQL_ID) {
wValue = dt.getValue(row, 2)
}
return wValue
},
label: SQL_ID,
type: 'number'
})
aggColumns.push({
aggregation: google.visualization.data.sum,
column: index + 1,
label: SQL_ID,
type: 'number'
})
})
var view = new google.visualization.DataView(data)
view.setColumns(viewColumns)
var groupView = google.visualization.data.group(
view,
[0],
aggColumns
)
var container = document.getElementById('chart_sql_div')
var chart = new google.visualization.AreaChart(container)
chart.draw(groupView, {
areaOpacity: 1,
colors: colorPallette,
isStacked: true
})
var table = new google.visualization.Table(document.getElementById('table_div'))
table.draw(groupView)
<!-- this starts for sql id -->
var data = google.visualization.arrayToDataTable([
['TIME', 'W','SMPL']
, [new Date(2017,5,01,09,59),'CPU',1]
, [new Date(2017,5,01,09,59),'CPU',1]
, [new Date(2017,5,01,09,59),'CPU',1]
, [new Date(2017,5,01,09,59),'CPU',1]
, [new Date(2017,5,01,09,59),'CPU',1]
, [new Date(2017,5,01,09,59),'db file sequential read',1]
, [new Date(2017,5,01,09,59),'db file sequential read',1]
, [new Date(2017,5,01,09,59),'db file sequential read',1]
, [new Date(2017,5,01,12,00),'CPU',1]
, [new Date(2017,5,01,12,00),'log file sync',1]
, [new Date(2017,5,01,12,00),'db file sequential read',1]
])
var colorPallette = ['#273746','#707B7C','#dc7633','#f1c40f','#1e8449','#2874a6','#6c3483','#922b21']
var wValues = data.getDistinctValues(1)
var viewColumns = [0]
var aggColumns = []
wValues.forEach(function (w, index) {
viewColumns.push({
calc: function (dt, row) {
var wValue = null
if (dt.getValue(row, 1) === w) {
wValue = dt.getValue(row, 2)
}
return wValue
},
label: w,
type: 'number'
})
aggColumns.push({
aggregation: google.visualization.data.sum,
column: index + 1,
label: w,
type: 'number'
})
})
var view = new google.visualization.DataView(data)
view.setColumns(viewColumns)
var groupView = google.visualization.data.group(
view,
[0],
aggColumns
)
var container = document.getElementById('chart_wait_div')
var chart = new google.visualization.AreaChart(container)
chart.draw(groupView, {
areaOpacity: 1,
colors: colorPallette,
isStacked: true
})
var table = new google.visualization.Table(document.getElementById('wait_div'))
table.draw(groupView)
}
function drawChart() {
var data = google.visualization.arrayToDataTable([
['TIME', 'W','SMPL']
, [new Date(2017,5,01,09,59),'CPU',1]
, [new Date(2017,5,01,09,59),'CPU',1]
, [new Date(2017,5,01,09,59),'CPU',1]
, [new Date(2017,5,01,09,59),'CPU',1]
, [new Date(2017,5,01,09,59),'CPU',1]
, [new Date(2017,5,01,09,59),'db file sequential read',1]
, [new Date(2017,5,01,09,59),'db file sequential read',1]
, [new Date(2017,5,01,09,59),'db file sequential read',1]
, [new Date(2017,5,01,12,00),'CPU',1]
, [new Date(2017,5,01,12,00),'log file sync',1]
, [new Date(2017,5,01,12,00),'db file sequential read',1]
])
var colorPallette = ['#273746','#707B7C','#dc7633','#f1c40f','#1e8449','#2874a6','#6c3483','#922b21']
var wValues = data.getDistinctValues(1)
var viewColumns = [0]
var aggColumns = []
wValues.forEach(function (w, index) {
viewColumns.push({
calc: function (dt, row) {
var wValue = null
if (dt.getValue(row, 1) === w) {
wValue = dt.getValue(row, 2)
}
return wValue
},
label: w,
type: 'number'
})
aggColumns.push({
aggregation: google.visualization.data.sum,
column: index + 1,
label: w,
type: 'number'
})
})
var view = new google.visualization.DataView(data)
view.setColumns(viewColumns)
var groupView = google.visualization.data.group(
view,
[0],
aggColumns
)
var container = document.getElementById('chart_wait_div')
var chart = new google.visualization.AreaChart(container)
chart.draw(groupView, {
areaOpacity: 1,
colors: colorPallette,
isStacked: true
})
var table = new google.visualization.Table(document.getElementById('wait_div'))
table.draw(groupView)
}
</script>
</head>
<body>
<div id="chart_sql_div" style="width: 1200px; height: 500px;position: absolute;top: 80px;left: 0;width: 600px;height: 400px;"></div>
<div id="chart_wait_div" style="width: 1200px; height: 500px;position: absolute;top: 80px;right: 0;width: 600px;height: 400px;"></div>
</body>
</html>
2 个答案:
答案 0 :(得分：1)
有两个具有相同名称的功能 - ＆gt; drawChart
将其中一个重命名为drawChart2，
并在与drawChart ...
google.charts.load('current', {
callback: function () {
drawCharts();
window.addEventListener('resize', drawCharts, false);
},
packages:['corechart', 'table']
})
function drawCharts() {
drawChart();
drawChart2(); // <-- new fn name
}
请参阅以下工作代码段...
＆＃13;
＆＃13;
＆＃13;
＆＃13;
google.charts.load('current', {
callback: function () {
drawCharts();
window.addEventListener('resize', drawCharts, false);
},
packages:['corechart']
})
function drawCharts() {
drawChart();
drawChart2();
}
function drawChart() {
var data = google.visualization.arrayToDataTable([
['TIME', 'SQL_ID','SMPL']
, [new Date(2017,5,01,09,59),'NO_SQL',1]
, [new Date(2017,5,01,09,59),'6f02ugbcuw469',1]
, [new Date(2017,5,01,09,59),'2ffdrqqfyz60w',3]
, [new Date(2017,5,01,10,00),'bpmkc2j8mh7k0',2]
, [new Date(2017,5,01,10,00),'037z3fuxqsxyr',1]
, [new Date(2017,5,01,10,00),'NO_SQL',9]
, [new Date(2017,5,01,10,00),'NO_SQL',2]
, [new Date(2017,5,01,10,01),'NO_SQL',1]
, [new Date(2017,5,01,10,01),'037z3fuxqsxyr',15]
, [new Date(2017,5,01,10,01),'NO_SQL',1]
, [new Date(2017,5,01,10,01),'NO_SQL',1]
, [new Date(2017,5,01,10,01),'NO_SQL',2]
, [new Date(2017,5,01,10,01),'NO_SQL',1]
, [new Date(2017,5,01,10,01),'NO_SQL',5]
, [new Date(2017,5,01,10,01),'NO_SQL',8]
, [new Date(2017,5,01,10,01),'6f02ugbcuw469',1]
, [new Date(2017,5,01,10,01),'2ffdrqqfyz60w',4]
, [new Date(2017,5,01,10,01),'bpmkc2j8mh7k0',15]
, [new Date(2017,5,01,10,01),'NO_SQL',6]
, [new Date(2017,5,01,10,01),'6f02ugbcuw469',6]
, [new Date(2017,5,01,10,01),'NO_SQL',1]
, [new Date(2017,5,01,10,01),'NO_SQL',1]
, [new Date(2017,5,01,10,01),'NO_SQL',1]
, [new Date(2017,5,01,11,58),'NO_SQL',1]
, [new Date(2017,5,01,11,59),'NO_SQL',1]
, [new Date(2017,5,01,11,59),'037z3fuxqsxyr',1]
, [new Date(2017,5,01,11,59),'bpmkc2j8mh7k0',1]
, [new Date(2017,5,01,11,59),'2ffdrqqfyz60w',12]
, [new Date(2017,5,01,11,59),'NO_SQL',1]
, [new Date(2017,5,01,11,59),'6f02ugbcuw469',7]
, [new Date(2017,5,01,11,59),'6f02ugbcuw469',1]
, [new Date(2017,5,01,11,59),'037z3fuxqsxyr',15]
, [new Date(2017,5,01,11,59),'bpmkc2j8mh7k0',15]
, [new Date(2017,5,01,12,00),'037z3fuxqsxyr',3]
, [new Date(2017,5,01,12,00),'2ffdrqqfyz60w',4]
, [new Date(2017,5,01,12,00),'NO_SQL',1]
, [new Date(2017,5,01,12,00),'6f02ugbcuw469',1]
, [new Date(2017,5,01,12,00),'bpmkc2j8mh7k0',5]
, [new Date(2017,5,01,12,00),'6f02ugbcuw469',4]
, [new Date(2017,5,01,12,00),'NO_SQL',2]
])
var colorPallette = ['#273746','#707B7C','#dc7633','#f1c40f','#1e8449','#2874a6','#6c3483','#922b21']
var wValues = data.getDistinctValues(1)
var viewColumns = [0]
var aggColumns = []
wValues.forEach(function (SQL_ID, index) {
viewColumns.push({
calc: function (dt, row) {
var wValue = null
if (dt.getValue(row, 1) === SQL_ID) {
wValue = dt.getValue(row, 2)
}
return wValue
},
label: SQL_ID,
type: 'number'
})
aggColumns.push({
aggregation: google.visualization.data.sum,
column: index + 1,
label: SQL_ID,
type: 'number'
})
})
var view = new google.visualization.DataView(data)
view.setColumns(viewColumns)
var groupView = google.visualization.data.group(
view,
[0],
aggColumns
)
var container = document.getElementById('chart_sql_div')
var chart = new google.visualization.AreaChart(container)
chart.draw(groupView, {
areaOpacity: 1,
colors: colorPallette,
isStacked: true
})
<!-- this starts for sql id -->
var data = google.visualization.arrayToDataTable([
['TIME', 'W','SMPL']
, [new Date(2017,5,01,09,59),'CPU',1]
, [new Date(2017,5,01,09,59),'CPU',1]
, [new Date(2017,5,01,09,59),'CPU',1]
, [new Date(2017,5,01,09,59),'CPU',1]
, [new Date(2017,5,01,09,59),'CPU',1]
, [new Date(2017,5,01,09,59),'db file sequential read',1]
, [new Date(2017,5,01,09,59),'db file sequential read',1]
, [new Date(2017,5,01,09,59),'db file sequential read',1]
, [new Date(2017,5,01,12,00),'CPU',1]
, [new Date(2017,5,01,12,00),'log file sync',1]
, [new Date(2017,5,01,12,00),'db file sequential read',1]
])
var colorPallette = ['#273746','#707B7C','#dc7633','#f1c40f','#1e8449','#2874a6','#6c3483','#922b21']
var wValues = data.getDistinctValues(1)
var viewColumns = [0]
var aggColumns = []
wValues.forEach(function (w, index) {
viewColumns.push({
calc: function (dt, row) {
var wValue = null
if (dt.getValue(row, 1) === w) {
wValue = dt.getValue(row, 2)
}
return wValue
},
label: w,
type: 'number'
})
aggColumns.push({
aggregation: google.visualization.data.sum,
column: index + 1,
label: w,
type: 'number'
})
})
var view = new google.visualization.DataView(data)
view.setColumns(viewColumns)
var groupView = google.visualization.data.group(
view,
[0],
aggColumns
)
var container = document.getElementById('chart_wait_div')
var chart = new google.visualization.AreaChart(container)
chart.draw(groupView, {
areaOpacity: 1,
colors: colorPallette,
isStacked: true
})
}
function drawChart2() {
var data = google.visualization.arrayToDataTable([
['TIME', 'W','SMPL']
, [new Date(2017,5,01,09,59),'CPU',1]
, [new Date(2017,5,01,09,59),'CPU',1]
, [new Date(2017,5,01,09,59),'CPU',1]
, [new Date(2017,5,01,09,59),'CPU',1]
, [new Date(2017,5,01,09,59),'CPU',1]
, [new Date(2017,5,01,09,59),'db file sequential read',1]
, [new Date(2017,5,01,09,59),'db file sequential read',1]
, [new Date(2017,5,01,09,59),'db file sequential read',1]
, [new Date(2017,5,01,12,00),'CPU',1]
, [new Date(2017,5,01,12,00),'log file sync',1]
, [new Date(2017,5,01,12,00),'db file sequential read',1]
])
var colorPallette = ['#273746','#707B7C','#dc7633','#f1c40f','#1e8449','#2874a6','#6c3483','#922b21']
var wValues = data.getDistinctValues(1)
var viewColumns = [0]
var aggColumns = []
wValues.forEach(function (w, index) {
viewColumns.push({
calc: function (dt, row) {
var wValue = null
if (dt.getValue(row, 1) === w) {
wValue = dt.getValue(row, 2)
}
return wValue
},
label: w,
type: 'number'
})
aggColumns.push({
aggregation: google.visualization.data.sum,
column: index + 1,
label: w,
type: 'number'
})
})
var view = new google.visualization.DataView(data)
view.setColumns(viewColumns)
var groupView = google.visualization.data.group(
view,
[0],
aggColumns
)
var container = document.getElementById('chart_wait_div')
var chart = new google.visualization.AreaChart(container)
chart.draw(groupView, {
areaOpacity: 1,
colors: colorPallette,
isStacked: true
})
}<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_sql_div"></div>
<div id="chart_wait_div"></div>
<div id="wait_div"></div>
答案 1 :(得分：1)
如果要在一个网页上绘制多个图表，请包含代码 页面中的以下内容：
- 在一次调用google.charts.load（）中加载图表所需的所有包。
- 对于页面上的每个图表，使用绘制的回调添加对google.charts.setOnLoadCallback（）的调用 图表作为输入 - 例如， google.charts.setOnLoadCallback（myPieChart）。
Google图表文档Draw Multiple Charts概述了这一点。
所以不要这样做：
window.addEventListener('resize', drawChart, false);
window.addEventListener('resize', drawChart2, false);
您可以将所有图表捆绑到一个功能中，例如：
window.addEventListener('resize', drawCharts, false);
drawCharts(...){
drawChart1();
drawChart2();
drawChart3();
..........
}
（请注意，如果您尝试混合材料和非材料图表，这将不起作用。但对于其他一切，它将起作用）
我最近做了同样的事情，我发现this JSFiddle有帮助。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？