在 html 页面内的谷歌图表表中嵌入折线图答案

【问题标题】：Embedding a line chart inside a google chart table inside an html page在 html 页面内的谷歌图表表中嵌入折线图
【发布时间】：2020-10-07 07:38:44
【问题描述】：

我有一个表格（取自谷歌图表）和一个折线图（也取自那里），我想将它嵌入表格中。我知道有一种方法可以通过提高标志“允许 html”来将 html 页面嵌入到表格中，但没有设法找到这样做的确切语法。我希望它看起来像这样（这里使用迷你图）：这是我的表格 html：

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['table']});
      google.charts.setOnLoadCallback(drawTable);

      function drawTable() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Name');
        data.addColumn('number', 'Salary');
        data.addColumn('boolean', 'Full Time Employee');
        data.addRows([
          ['Mike',  {v: 10000, f: '$10,000'}, true, **HTML LINE CHART1 HERE**],
          ['Jim',   {v:8000,   f: '$8,000'},  false, **HTML LINE CHART2 HERE**],
          ['Alice', {v: 12500, f: '$12,500'}, true,**HTML LINE CHART3 HERE**],
          ['Bob',   {v: 7000,  f: '$7,000'},  true,**HTML LINE CHART4 HERE**]
        ]);

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

        table.draw(data, {showRowNumber: true, width: '100%', height: '100%'});
      }
    </script>
  </head>
  <body>
    <div id="table_div"></div>
  </body>
</html>

折线图的html：

  <html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses'],
          ['2004',  1000,      400],
          ['2005',  1170,      460],
          ['2006',  660,       1120],
          ['2007',  1030,      540]
        ]);

        var options = {
          title: 'Company Performance',
          curveType: 'function',
          legend: { position: 'bottom' }
        };

        var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="curve_chart" style="width: 900px; height: 500px"></div>
  </body>
</html>

我希望第二个 html 出现在例如布尔列的 instrad 中。谢谢！！！

【问题讨论】：

标签： html google-apps-script charts google-visualization

【解决方案1】：

建议先画表。
然后在桌子的'ready'事件上，
为每个表格单元格添加图表。

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

一旦 ready 事件触发，我们就会得到表格图表容器。
然后找到每一行和单元格。
我们将折线图的容器添加到最后一个单元格，然后绘制图表。

表格图表中的数据用于绘制每个折线图。
表格数据中的行被循环，直到正在绘制的图表的行。

google.charts.load('current', {
  packages: ['corechart', 'table']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Name');
  data.addColumn('number', 'Salary');
  data.addColumn('string', 'Chart');
  data.addRows([
    ['Mike', {v: 10000, f: '$10,000'}, null],
    ['Jim', {v: 8000, f: '$8,000'}, null],
    ['Alice', {v: 12500, f: '$12,500'}, null],
    ['Bob', {v: 7000, f: '$7,000'}, null]
  ]);

  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 === (tableRow.cells.length - 1)) {
            // add chart continer
            var chartContainer = tableCell.appendChild(document.createElement('div'));
            chartContainer.className = 'chart';

            // build chart data table
            var dataChart = new google.visualization.DataTable();
            dataChart.addColumn('number', 'x');
            dataChart.addColumn('number', 'y');
            for (var i = 0; i <= rowIndex; i++) {
              dataChart.addRow([i, data.getValue(i, 1)]);
            }

            // draw chart
            var chart = new google.visualization.LineChart(chartContainer);
            chart.draw(dataChart, {
              chartArea: {
                left: 24,
                top: 16,
                right: 24,
                bottom: 16,
                height: '100%',
                width: '100%'
              },
              height: '100%',
              legend: 'none',
              pointSize: 6,
              width: '100%'
            });
          }
        });
      });
    });
  });

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

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

.chart {
  min-height: 200px;
}

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

【讨论】：

是的，这正是我想要的，谢谢！我看到的一个小问题是，一旦单击表格的标题进行排序，图表就会消失。每次都需要去排序回调并构建折线图吗？
是的，您应该能够在准备就绪和排序时调用相同的函数...

【解决方案2】：

您想要实现的有点棘手但可行。我能想到的一种方法是首先创建折线图，获取图像 URI，然后在表格图表中使用“allowHtml”，嵌入一个“”标签，其中“src”属性指向图表的图像 URI用户。

示例：

表格图表中的线条：

['Mike', {v: 10000, f: '$10,000'}, true, **HTML LINE CHART1 HERE**]

更改为：

['Mike', {v: 10000, f: '$10,000'}, true, '<img src="'+ chart.getImageURI()+ '">']

其中chart 是每个用户的折线图，使用选项allowHtml: true。哦，对于 HTML，将列数据类型设置为“字符串”。

参考资料：

【讨论】：