Question

我想使用Dashboard设置Google Table图表的列宽。在下面的代码中，我希望最后一列的宽度较小。我尝试了许多不同的方法，但是找不到方法。我找到了一些答案，但是它们没有用，因为我也在使用仪表板。

任何帮助将不胜感激。谢谢。

<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
        <!-- <link href=basic.css rel=stylesheet> -->
        <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
            <title>Database</title>
            <!--Load the AJAX API-->
            <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
            <script type="text/javascript">

  // Load the Visualization API and the corechart package.
  google.charts.load('current', {'packages':['corechart', 'table', 'bar', 'controls']});

  // Set a callback to run when the Google Visualization API is loaded.
  google.charts.setOnLoadCallback(drawDashboard);

  // Callback that creates and populates a data table,
  // instantiates a dashboard, a range slider and a pie chart,
  // passes in the data and draws it.
  function drawDashboard() {
    var queryString = encodeURIComponent('SELECT A, B, C, D, E, F, G LIMIT -1 OFFSET 0');
    // var queryString = encodeURIComponent('SELECT A, B, C LIMIT 4 OFFSET 0');
    var query = new google.visualization.Query(
        'https://docs.google.com/spreadsheets/d/15ud0n_PHIrblt40AVj9WARTOLY2hA1NcklExPBL2uVw/gviz/tq?sheet=Sheet1&headers=1&tq=' + queryString);
    query.send(handleSampleDataQueryResponse);
    // console.log(data); 
  }

function handleSampleDataQueryResponse(response) {
  if (response.isError()) {
    alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
    return;
  }

  var data = response.getDataTable();
  data.setColumnLabel(0, 'Compound No.');
  data.setColumnLabel(1, 'Functional Group');
  data.setColumnLabel(2, 'Representative Molecule');
  data.setColumnLabel(3, 'Elements of Rep. Molecule');
  data.setColumnLabel(4, 'Ab-Initio Functional Group Charges');
  data.setColumnLabel(4, 'Charges');
  // data.setColumnLabel(5, 'Ab-Initio Monomer-CO2 Optimization');
  data.setColumnLabel(5, 'Frequency Results');
  data.setColumnLabel(6, 'Ab-Initio Monomer-CO2 Interaction Energy (kJ/mol)');
  // data.setProperty(0, 6, 'style', 'width:50px');


  // data.setProperty(0, 3, 'style', 'width:3000px');

  // console.log(data);
  // var chart = new google.visualization.Table(document.getElementById('chart_div'));
  // // chart.draw(data, { height: 400 });
  // chart.draw(data, {showRowNumber: true, width: '100%', height: '100%'});
          // Create a dashboard.
          var dashboard = new google.visualization.Dashboard(
        document.getElementById('dashboard_div'));


    // Create a range slider, passing some options
    var RangeSlider = new google.visualization.ControlWrapper({
      'controlType': 'NumberRangeFilter',
      'containerId': 'filter_div',
      'options': {
        filterColumnIndex: 6,
        // 'filterColumnLabel': 'Donuts eaten'
        ui: {
            label: 'Monomer-CO2 Interaction Energy (kJ/mol): '
        }
      }
    });

    var stringFilter = new google.visualization.ControlWrapper({
    controlType: 'StringFilter',
    containerId: 'string_filter_div',
    options: {
        filterColumnIndex: 1,
        ui: {
            label: 'Functional Group: '
        }
    }
});

var categoryPicker = new google.visualization.ControlWrapper({
    controlType: 'CategoryFilter',
    containerId: 'TeamName_div',
    options: {
        // filterColumnLabel: 'Teams', // filter by Team name
        filterColumnIndex: 1, // filter by Team name
        ui: {
            label: 'Functional Group: ',
            caption: 'Functional Group',
            sortValues: true,
            allowNone: true,
            allowMultiple: true,
            allowTyping: true
        }

    }
});

    // Create a pie chart, passing some options
    var tableChart = new google.visualization.ChartWrapper({
      'chartType': 'Table',
      'containerId': 'chart_div',
      'options': {
        'allowHtml': true,
        // 'showRowNumber': 1,
        'columnWidth': 10,
        // 'height': 300,
        // 'pieSliceText': 'value',
        'legend': 'right'
      }
    });

    console.log(tableChart.getOptions());

    dashboard.bind([stringFilter, RangeSlider, categoryPicker], [tableChart]);

    // Draw the dashboard.
    // data.setCell(1, 1, '', {style: 'font-style:bold; font-size:52px;'});
    var style1 = data.getProperty(0, 6, 'style');
    console.log(style1);
    // dashboard.draw(data, {showRowNumber: false, width: '100%', height: '100%',allowHtml: true});
    // dashboard.draw(data); //, {showRowNumber: false, width: '50%', height: '10%',allowHtml: true});
    dashboard.draw(data, {showRowNumber: false, width: '100%', height: '100%',allowHtml: true, cssClassNames: {headerCell: 'foobar'}});
  }

</script>
        </head>
        <body style="margin: 10">
            <h2>Database</h2>
            <p>Following table shows the interaction energies between different functional groups and gas molecules </p>
            <!--Div that will hold the dashboard-->
            <div id="dashboard_div">
                <!--Divs that will hold each control and chart-->
                <!-- <div style="width:00px; margin:0 left;" id="string_filter_div"></div> -->
                <div style="margin: 10" id="string_filter_div"></div>
                <div style="margin: 10" id="TeamName_div"></div>
                <div style="margin: 10" id="filter_div"></div>
                <!-- <div id="chart_div" style="width: 90%; height: 20%;"></div> -->
                <div style="margin: 10" id="chart_div"></div>
            </div>
        </body>
    </html>

使用仪表板设置Google Table图表的列宽

0 个答案: