在谷歌图表表中嵌入仪表板答案

【问题标题】：Embedding a dashboard inside a google chart table在谷歌图表表中嵌入仪表板
【发布时间】：2020-11-11 12:47:13
【问题描述】：

关注这篇文章：Embedding a line chart inside a google chart table inside an html page 我想得到一个看起来像这样的表：

仅将折线图替换为如下所示的仪表板图表：

使用我的代码运行以下 sn-p 以查看我得到的结果。

google.charts.load('current', {
  'packages': ['corechart', 'controls', 'table', 'charteditor']
});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {

  var tableData = new google.visualization.DataTable();
  tableData.addColumn('string', 'Name');
  tableData.addColumn('number', 'Salary');
  tableData.addColumn('string', 'Chart');
  tableData.addColumn('string', 'Test');
  tableData.addRows([
    ['Mike', {
      v: 10000,
      f: '$10,000'
    }, null, '5thFirst'],
    ['Jim', {
      v: 8000,
      f: '$8,000'
    }, null, '5thSecond'],
    ['Alice', {
      v: 12500,
      f: '$12,500'
    }, null, '5thThird'],
    ['Bob', {
      v: 7000,
      f: '$7,000'
    }, null, '5thForth']
  ]);


  var table = new google.visualization.Table(document.getElementById('table_div'));

  google.visualization.events.addListener(table, 'ready', function() {
    // table body
    Array.prototype.forEach.call(table.getContainer().getElementsByTagName('tbody'), function(tableBody) {
      // table rows
      Array.prototype.forEach.call(tableBody.rows, function(tableRow, rowIndex) {
        // table cells
        Array.prototype.forEach.call(tableRow.cells, function(tableCell, cellIndex) {
          // determine if last cell
          if (cellIndex === (2)) {
            // var dashboardDiv = document.createElement('div');
            // dashboardDiv.setAttribute("id", "dashboard_div");
            var dashboardContainer = tableCell.appendChild(document.getElementById('dashboard_div'));
            //dashboardContainer.className = 'chart';

            var control = new google.visualization.ControlWrapper({
              'controlType': 'ChartRangeFilter',
              'containerId': 'control_div',
              'options': {
                'filterColumnIndex': 0,
                'ui': {
                  'chartOptions': {
                    'height': 50,
                    'chartArea': {
                      'width': '75%'
                    },
                    'series': {
                      0: {
                        'targetAxisIndex': 0
                      },
                      1: {
                        'targetAxisIndex': 1
                      }
                    },
                    'vAxes': {
                      0: {
                        'title': 'Weight'
                      },
                      1: {
                        'title': 'smA'
                      }
                    }
                  }
                }
              },
            });

            var chart = new google.visualization.ChartWrapper({
              'chartType': 'ComboChart',
              'containerId': 'chart_div',
              'options': {
                'legend': {
                  'position': 'bottom',
                  'alignment': 'center',
                  'textStyle': {
                    'fontSize': 12
                  }
                },
                'explorer': {
                  'actions': ['dragToZoom', 'rightClickToReset'],
                  'axis': 'horizontal',
                  'keepInBounds': true
                },
                'hAxis': {
                  'title': 'X'
                },
                'pointSize': 3,
                'series': {
                  0: {
                    'targetAxisIndex': 0
                  },
                  1: {
                    'targetAxisIndex': 1
                  }
                },
                'vAxes': {
                  0: {
                    'title': 'Weight'
                  },
                  1: {
                    'title': 'smA'
                  }
                }
              }
            });

            // build chart data table
            var chartData = new google.visualization.DataTable();
            chartData.addColumn('date', 'timestamp');
            chartData.addColumn('number', 'weight');
            chartData.addColumn('number', 'smA');
            chartData.addRow([new Date(2016, 0, 1), 1, 123]);
            chartData.addRow([new Date(2016, 1, 1), 6, 42]);
            chartData.addRow([new Date(2016, 2, 1), 4, 49]);
            chartData.addRow([new Date(2016, 3, 1), 23, 486]);
            chartData.addRow([new Date(2016, 4, 1), 89, 476]);
            chartData.addRow([new Date(2016, 5, 1), 46, 444]);

            var dashboard = new google.visualization.Dashboard(dashboardContainer);
            dashboard.bind(control, chart);
            dashboard.draw(chartData);
          }
        });
      });
    });
  });

  table.draw(tableData, {
    showRowNumber: false,
    width: '100%',
    height: '100%'
  });
}

html,
body {
  height: 100%;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
}

.chart {
  width: 500px;
  height: 300px border: 1px solid black;
  min-height: 200px;
}

.beige-background {
  background-color: beige;
}

<html>

<head>
  <script src="https://www.gstatic.com/charts/loader.js"></script>
</head>

<body>
  <div id="table_div"></div>
  <div id="dashboard_div" style="border: 1px solid #ccc">
    <table class="columns">
      <tr>
        <td>
          <div id="chart_div"></div>
          <div id="control_div" style="padding-left: 2em; min-width: 250px"></div>
        </td>
      </tr>
    </table>
  </div>
</body>

</html>

我希望将仪表板插入每一行。可能是什么问题？

【问题讨论】：

您能用一些最小的实际样本数据替换function getData() { google.script.run.withSuccessHandler(drawChart).getPlantsData(); } 以供我们重现吗？有关指针，请参阅minimal-reproducible-example
出了什么问题？你能发布答案吗？
我的意思是我修复了你所说的:) 将其更改为示例数据，仍然不知道解决方案
我明白了。检查我的答案

标签： javascript html charts google-visualization

【解决方案1】：

仪表板只出现在最后一行的原因是仪表板元素只有一个。
当它通过循环时，它会将仪表板附加并移动到每个单元格，
循环结束后在最后一行结束。

而不是使用现有的仪表板元素，
让我们动态添加仪表板元素，每行一个。

这里，我们使用 html 模板来存储仪表板内容。

<!-- template: dashboard template -->
<script id="template-dashboard" type="text/html">
  <div id="dashboard-{{Id}}" style="border: 1px solid #ccc;">
    <table class="columns">
      <tr>
        <td>
          <div id="chart-{{Id}}"></div>
          <div id="control-{{Id}}" style="padding-left: 2em; min-width: 250px;"></div>
        </td>
      </tr>
    </table>
  </div>
</script>

然后将内容添加到每个表格单元格中，
使用行索引作为每个仪表板和控件的 id。

// insert dashboard html
tableCell.insertAdjacentHTML('beforeEnd', renderTemplate('template-dashboard', {
  Id: rowIndex
}));

然后我们可以使用 id 引用新创建的元素...

// build dashboard
var dashboardContainer = tableCell.appendChild(document.getElementById('dashboard-' + rowIndex));

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

google.charts.load('current', {
  'packages': ['corechart', 'controls', 'table', 'charteditor']
});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {

  var tableData = new google.visualization.DataTable();
  tableData.addColumn('string', 'Name');
  tableData.addColumn('number', 'Salary');
  tableData.addColumn('string', 'Chart');
  tableData.addColumn('string', 'Test');
  tableData.addRows([
    ['Mike', {
      v: 10000,
      f: '$10,000'
    }, null, '5thFirst'],
    ['Jim', {
      v: 8000,
      f: '$8,000'
    }, null, '5thSecond'],
    ['Alice', {
      v: 12500,
      f: '$12,500'
    }, null, '5thThird'],
    ['Bob', {
      v: 7000,
      f: '$7,000'
    }, null, '5thForth']
  ]);


  var table = new google.visualization.Table(document.getElementById('table_div'));

  google.visualization.events.addListener(table, 'ready', function() {
    // table body
    Array.prototype.forEach.call(table.getContainer().getElementsByTagName('tbody'), function(tableBody) {
      // table rows
      Array.prototype.forEach.call(tableBody.rows, function(tableRow, rowIndex) {
        // table cells
        Array.prototype.forEach.call(tableRow.cells, function(tableCell, cellIndex) {
          // determine cell
          if (cellIndex === (2)) {
            // insert dashboard html
            tableCell.insertAdjacentHTML('beforeEnd', renderTemplate('template-dashboard', {
              Id: rowIndex
            }));

            // build dashboard
            var dashboardContainer = tableCell.appendChild(document.getElementById('dashboard-' + rowIndex));

            var control = new google.visualization.ControlWrapper({
              'controlType': 'ChartRangeFilter',
              'containerId': 'control-' + rowIndex,
              'options': {
                'filterColumnIndex': 0,
                'ui': {
                  'chartOptions': {
                    'height': 50,
                    'chartArea': {
                      'width': '75%'
                    },
                    'series': {
                      0: {
                        'targetAxisIndex': 0
                      },
                      1: {
                        'targetAxisIndex': 1
                      }
                    },
                    'vAxes': {
                      0: {
                        'title': 'Weight'
                      },
                      1: {
                        'title': 'smA'
                      }
                    }
                  }
                }
              },
            });

            var chart = new google.visualization.ChartWrapper({
              'chartType': 'ComboChart',
              'containerId': 'chart-' + rowIndex,
              'options': {
                'legend': {
                  'position': 'bottom',
                  'alignment': 'center',
                  'textStyle': {
                    'fontSize': 12
                  }
                },
                'explorer': {
                  'actions': ['dragToZoom', 'rightClickToReset'],
                  'axis': 'horizontal',
                  'keepInBounds': true
                },
                'hAxis': {
                  'title': 'X'
                },
                'pointSize': 3,
                'series': {
                  0: {
                    'targetAxisIndex': 0
                  },
                  1: {
                    'targetAxisIndex': 1
                  }
                },
                'vAxes': {
                  0: {
                    'title': 'Weight'
                  },
                  1: {
                    'title': 'smA'
                  }
                }
              }
            });

            // build chart data table
            var chartData = new google.visualization.DataTable();
            chartData.addColumn('date', 'timestamp');
            chartData.addColumn('number', 'weight');
            chartData.addColumn('number', 'smA');
            chartData.addRow([new Date(2016, 0, 1), 1, 123]);
            chartData.addRow([new Date(2016, 1, 1), 6, 42]);
            chartData.addRow([new Date(2016, 2, 1), 4, 49]);
            chartData.addRow([new Date(2016, 3, 1), 23, 486]);
            chartData.addRow([new Date(2016, 4, 1), 89, 476]);
            chartData.addRow([new Date(2016, 5, 1), 46, 444]);

            var dashboard = new google.visualization.Dashboard(dashboardContainer);
            dashboard.bind(control, chart);
            dashboard.draw(chartData);
          }
        });
      });
    });
  });

  table.draw(tableData, {
    showRowNumber: false,
    width: '100%',
    height: '100%'
  });
}

// render html template
function renderTemplate(templateId, templateValues) {
  var templateText;   // html string to return
  var templateValue;  // html value

  // get template html
  templateText = document.getElementById(templateId).innerHTML;

  // replace place holders with values
  if (templateValues) {
    for (var propHandle in templateValues) {
      if (templateValues.hasOwnProperty(propHandle)) {
        templateValue = '';
        if (templateValues[propHandle] !== null) {
          templateValue = templateValues[propHandle].toString();
        }
        if (templateValue.indexOf('$') > -1) {
          templateValue = templateValue.replace(new RegExp('\\$', 'g'), '$$$');
        }
        if (templateText.indexOf('{{' + propHandle + '}}') > -1) {
          templateText = templateText.replace(new RegExp('{{' + propHandle + '}}', 'g'), templateValue);
        }
      }
    }
  }
  return templateText.trim();
}

html,
body {
  height: 100%;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
}

.chart {
  width: 500px;
  height: 300px border: 1px solid black;
  min-height: 200px;
}

.beige-background {
  background-color: beige;
}

<html>
  <head>
    <script src="https://www.gstatic.com/charts/loader.js"></script>
  </head>
  <body>
    <div id="table_div"></div>

    <!-- template: dashboard template -->
    <script id="template-dashboard" type="text/html">
      <div id="dashboard-{{Id}}" style="border: 1px solid #ccc;">
        <table class="columns">
          <tr>
            <td>
              <div id="chart-{{Id}}"></div>
              <div id="control-{{Id}}" style="padding-left: 2em; min-width: 250px;"></div>
            </td>
          </tr>
        </table>
      </div>
    </script>
  </body>
</html>

【讨论】：

【解决方案2】：

我认为您的问题来自以下行：

var dashboardContainer = tableCell.appendChild(document.createElement('dashboard_div'));

“dashboard_div”是什么元素？这将创建以下内容：

<dashboard_div></dashboard_div>

我确定这不是您想要的，因为您想将图表插入：

<div id="dashboard_div">

而且这两件事是不一样的。

您可能可以通过使用开发人员控制台检查 HTML 来查看结果，以查看图表是否真的被插入到正确的 HTML 标记中。

参考资料：

https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement

【讨论】：

好的，我改变了这一行：tableCell.appendChild(document.createElement('dashboard_div'));为此： tableCell.appendChild(document.getElementById('dashboard_div'));现在它在正确的单元格内，但只是在最后一行，而不是像第一个示例那样的所有行，可能是什么问题？
为了更清楚起见，我编辑了您的问题，如果您认为它有所不同，请随时回滚。现在，你的问题是什么？如何在每一行中放置相同的图表？
没错，最终的目标是在每一行放置一个不同的图表，但现在，我不明白为什么循环不像线图那样在每一行做同样的事情。
要记住的一点是，id="dashboard_div" 的元素只能有一个