drawChart

drawChart

关注
发信
关注(28)粉丝(399)

javascript - 如何在同一HTML上绘制2个Google图表

我正在尝试下面的代码，但它仅显示第一个图表。

你能不能请问我要去哪里错了。我尝试进行许多更改，但仍然没有运气。

我只得到一张图表，如下图所示：
javascript - 如何在同一HTML上绘制2个Google图表-LMLPHP

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>

最佳答案

有两个同名的函数-> 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>

07-24 21:59
Powered by LMLPHP ©2024 drawChart 0.028562