在 google 图表中嵌入折线图 table 在 html 页面中

Question

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

<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: ',000'}, true, **HTML LINE CHART1 HERE**],
          ['Jim',   {v:8000,   f: ',000'},  false, **HTML LINE CHART2 HERE**],
          ['Alice', {v: 12500, f: ',500'}, true,**HTML LINE CHART3 HERE**],
          ['Bob',   {v: 7000,  f: ',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 中。谢谢！！！

Answer 1

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

示例：

您在 table 图表中的线：

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

更改为：

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

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

参考文献：

Answer 2

建议先画table。
然后在 table 的 'ready' 事件中，
向每个 table 单元格添加一个图表。

请参阅以下工作片段...

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

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

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: ',000'}, null],
    ['Jim', {v: 8000, f: ',000'}, null],
    ['Alice', {v: 12500, f: ',500'}, null],
    ['Bob', {v: 7000, f: ',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>

在 google 图表中嵌入折线图 table 在 html 页面中

Embedding a line chart inside a google chart table inside an html page

html

charts

google-visualization

google-apps-script

示例：

参考文献：