谷歌图表：创建动态数据视图列

Question

Using google chart am trying to set data view .i have to create data view based on columns.

currently i have two functions to create data columns for 4 and 2. How can i combine these two functions and how can i create a function which dynamically create data 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

just need to build an array of the column definitions

since the calculated columns are objects with functions ( calc ),
these need to be created inside a closure (function)

see following working snippet...

pass a data table to the getDataView function
which will create a view column for each column in the data table
and a tooltip column for each y-axis column

 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>