Блог

Главная - Вопросы по программированию - Встраивание линейной диаграммы в таблицу диаграмм Google внутри HTML-страницы

Встраивание линейной диаграммы в таблицу диаграмм Google внутри HTML-страницы

#html #google-apps-script #charts #google-visualization

#HTML #google-apps-script #Диаграммы #google-визуализация

Вопрос:

У меня есть таблица (взятая из Google charts) и линейная диаграмма (также взятая оттуда), и я хочу встроить ее в таблицу. Я знаю, что есть способ встроить html-страницу в таблицу, подняв флаг «разрешить html», но не удалось найти точный синтаксис для этого. Я хочу, чтобы это выглядело так (здесь используется sparkline): Это мой 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 отображался, например, в строке логического столбца.
Спасибо!!!

Ответ №1:

рекомендуем сначала нарисовать таблицу.
затем в 'ready' событии таблицы
добавьте диаграмму в каждую ячейку таблицы.

смотрите следующий рабочий фрагмент…

как только срабатывает событие 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>

Комментарии:

1. Да, это именно то, что я искал, спасибо! Небольшая проблема, которую я вижу, заключается в том, что при нажатии на один из заголовков таблицы для сортировки диаграммы исчезают. Нужно ли мне каждый раз переходить к обратному вызову сортировки и строить линейную диаграмму?

2. Да, вы должны иметь возможность вызывать одну и ту же функцию как для ready, так и для sort…

Ответ №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 установите для типа данных столбца значение ‘string’.

Список литературы: