如何在同一个 html 上绘制 2 个谷歌图表

【问题标题】：How to draw 2 google charts on same html如何在同一个 html 上绘制 2 个谷歌图表
【发布时间】：2017-09-29 10:57:30
【问题描述】：

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

请问我哪里出错了。我尝试了很多更改，但仍然没有成功。

我只得到一个图表，如下图所示： 

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>

【问题讨论】：

    标签： javascript charts google-visualization visualization


    【解决方案1】：

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

    请参阅以下工作 sn-p... 

    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>

    【讨论】：

    • 它做到了！一个澄清，如何在不显示表格数据的情况下进行绘制。如果我尝试将下面的行放在最后一行，它只会显示一个图表。 `
      . But if i add table_div does it show the second graph.
      `。为什么会这样？
    • 该表是一个单独的图表，我通常添加用于测试，我已经在上面的答案中删除了 --> var table = new google.visualization.Table... `
    【解决方案2】：

    如果您想在一个网页上绘制多个图表，请包含以下代码 页面中的以下内容：

    • 一次调用 google.charts.load() 即可加载图表所需的所有包。
    • 对于页面上的每个图表，添加对 google.charts.setOnLoadCallback() 的调用以及绘制 图表作为输入 - 例如， google.charts.setOnLoadCallback(myPieChart)。

    Google Charts 文档中对此进行了概述，Draw Multiple Charts。

    所以不要这样做：

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

    您可以将所有图表捆绑到一个函数中，例如：

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

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

    （请注意，如果您尝试混合材料和非材料图表，这将不起作用。但对于其他一切，它会起作用）

    我最近也在做同样的事情，我发现this JSFiddle 有帮助。

    【讨论】：

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2021-12-08
      • 2017-01-11
      • 1970-01-01
      • 2020-01-18
      • 1970-01-01
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode