javascript - 谷歌图表 :Create dynamic data view columns

Question

我正在尝试使用 google chart 设置数据 View 。我必须基于列创建数据 View 。

目前我有两个函数来为 4 和 2 创建数据列。我如何结合这两个函数以及如何创建一个动态的函数创建数据 View

 var dataView = new google.visualization.DataView(chartData);
 setDataViewMultipleChart(dataView);



 function setDataViewMultiple(dataView) {
                dataView.setColumns([0, 1, {
                calc: function(dt, row) {
                return getTooltip(dt, row, 1);
                },
                role: 'tooltip',
                type: 'string',
                p: {
                html: true
                }
                }, 2, {
                calc: function(dt, row, ) {
                return getTooltip(dt, row, 2);
                },
                role: 'tooltip',
                type: 'string',
                p: {
                html: true
                }
                }, 3, {
                calc: function(dt, row) {
                return getTooltip(dt, row, 1);
                },
                role: 'tooltip',
                type: 'string',
                p: {
                html: true
                }
                }, 4, {
                calc: function(dt, row) {
                return getTooltip(dt, row, 2);
                },
                role: 'tooltip',
                type: 'string',
                p: {
                html: true
                }
                }]);
      }



      function setDataViewSingleChart(dataView) {
                dataView.setColumns([0, 1, {
                calc: function(dt, row) {
                return getTooltip(dt, row, 1);
                },
                role: 'tooltip',
                type: 'string',
                p: {
                html: true
                }
                }, 2, {
                calc: function(dt, row, ) {
                return getTooltip(dt, row, 2);
                },
                role: 'tooltip',
                type: 'string',
                p: {
                html: true
                }

                }]);
      }

Answer 1

只需要构建一个列定义数组

由于计算列是具有函数 (calc) 的对象，
这些需要在闭包(函数)内创建

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

将数据表传递给getDataView函数
这将为数据表中的每一列创建一个 View 列
以及每个 y 轴列的工具提示列

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Year', 'Sales', 'Expenses', 'Profit'],
    ['2014', 1000, 400, 200],
    ['2015', 1170, 460, 250],
    ['2016', 660, 1120, 300],
    ['2017', 1030, 540, 350]
  ]);

  var view = getDataView(data);
  var chart = new google.visualization.LineChart(document.querySelector('#chart_div'));
  chart.draw(view.toDataTable(), {
    tooltip: {
      isHtml: true
    }
  });

  function getDataView(dataTable) {
    var dataView;
    var viewColumns = [];

    for (var i = 0; i < dataTable.getNumberOfColumns(); i++) {
      addViewColumn(i);
    }

    function addViewColumn(index) {
      viewColumns.push(index);
      if (index > 0) {
        viewColumns.push({
          calc: function (dt, row) {
            return getTooltip(dt, row, index);
          },
          role: 'tooltip',
          type: 'string',
          p: {
            html: true
          }
        });
      }
    }

    dataView = new google.visualization.DataView(dataTable);
    dataView.setColumns(viewColumns);
    return dataView;
  }

  function getTooltip(dt, row, col) {
    var tooltip = '<div class="tooltip">';
    tooltip += '<div>' + dt.getFormattedValue(row, 0) + '</div>';
    tooltip += '<div>' + dt.getColumnLabel(col) + '</div>';
    tooltip += '<div>' + dt.getFormattedValue(row, col) + '</div>';
    tooltip += '</div>';
    return tooltip;
  }
});

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