如何繪製2相同的HTML谷歌圖表

我想下面的代碼，但它只顯示第一個圖表。如何繪製2相同的HTML谷歌圖表

你可以請我哪裏錯了。我試圖做很多改變，但仍然沒有運氣。

我只得到如下面的照片顯示在單個圖表：

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>

來源

2017-05-02 Sach

有兩個函數具有相同的名稱 - >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 
}

看到下面的工作片段...

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>

來源

2017-05-02 11:30:02 WhiteHat

它做到了！一個說明，如何繪製沒有表格數據顯示。如果我嘗試把下面的行放在最後一行，它只顯示一個圖。 '

'。但是，如果我添加table_div是否顯示第二個圖。 '

'。爲什麼會發生？ – Sach

表是一個單獨的圖表，我通常添加用於測試，我已經在上面的答案中刪除 - 它會 - >'var table = new google.visualization.Table ...' ' – WhiteHat

啊，我很愚蠢。疑難雜症。欣賞它。 – Sach

如果你想畫一個網頁上的多個圖表，包括代碼在以下該頁面：

通過一次調用將所有圖表所需的包加載到google.charts.load（）。

對於頁面上的每個圖表中，與繪製圖表作爲輸入回調添加到google.charts.setOnLoadCallback（）的調用 - 例如， google.charts.setOnLoadCallback（myPieChart）。

這在谷歌文檔圖表概述，Draw Multiple Charts。的

所以不是這樣：

window.addEventListener('resize', drawChart, false); 
window.addEventListener('resize', drawChart2, false);

你可以捆綁所有圖表到一個單一的功能，如：

window.addEventListener('resize', drawCharts, false); 

drawCharts(...){ 
    drawChart1(); 
    drawChart2(); 
    drawChart3(); 
    .......... 
}

（請注意，如果您嘗試這是行不通的並混合材料和非材料的圖表，但對於其他的，它會工作）

我最近做了同樣的事情，我發現this JSFiddle幫助。

來源

2017-05-02 11:39:21 Lissy

如何繪製2相同的HTML谷歌圖表

回答

相關問題