如何使用图表包装函数有条件地格式化谷歌可视化表单元格

How do I conditionally format Google visualization table cells using chart wrapper function?

本文关键字：谷歌 格式化 可视化 表单 单元格 有条件 何使 用图表 包装 函数      更新时间：2023-09-26

我是谷歌可视化Api的新手，希望有人能帮助我有条件地格式化谷歌可视化表中单元格的颜色。我已经能够更改不同列显示的数字格式，但在颜色格式方面没有这么幸运。我使用arrayToDataTable和chartwapper函数来显示我从电子表格中查询到的一些数据。

我需要用colorFormat变量或chartwapper函数来更改不接受格式设置的内容吗？提前谢谢！

function drawDashboard(response) {
  $('#main-heading').addClass("hidden");
  if (response == null) {
    alert('Error: Invalid source data.')
    return;
  } else {
    // Transmogrify spreadsheet contents (array) to a DataTable object
    var responseObjects = JSON.parse(response);
    console.log(responseObjects);
    var testData = [];
    for (var i = 1; i < responseObjects.length; i++) {
      responseObjects[i][0] = new Date(responseObjects[i][0]);
    }
    var data = google.visualization.arrayToDataTable(responseObjects, false);
    console.log(data);
    var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard-div'));
    var percentFormatter = new google.visualization.NumberFormat({
      pattern: '#,###.##%'
    });
    percentFormatter.format(data, 1);
    percentFormatter.format(data, 3);
    var numberFormatter = new google.visualization.NumberFormat({
      pattern: '#.##'
    });
    numberFormatter.format(data, 7);
    numberFormatter.format(data, 8);
    var colorFormatter = new google.visualization.ColorFormat();
    colorFormatter.addRange(0, 5, 'white', 'orange');
    colorFormatter.addRange(20000, 6, 'red', '#33ff33');
    colorFormatter.format(data, 8);
    colorFormatter.format(data, 9);
    colorFormatter.format(data, 10);
    colorFormatter.format(data, 11);
    var table = new google.visualization.ChartWrapper({
      'chartType': 'Table',
      'containerId': 'table-div',
      'view': {
        'columns': [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]
      },
    });
    var donutSlider = new google.visualization.ControlWrapper({
      'controlType': 'DateRangeFilter',
      'containerId': 'slider-div',
      'options': {
        'filterColumnLabel': 'Date'
      }
    });
    // Set up dependencies between controls and charts
    dashboard.bind(donutSlider, [table]);
    // Draw all visualization components of the dashboard
    dashboard.draw(data);
  }
}

看起来您正在正确使用格式化程序
但是参数有点偏离

还需要allowHtml: true在表选项中

请参阅以下使用链接电子表格的示例。。。

google.charts.load('current', {
  callback: function () {
    var query = new google.visualization.Query(
      'https://docs.google.com/spreadsheets/d/1TBTX_OmNUiq_J0uXEstkxeD6mtImi7BAPWKDBAQIiFA/edit#gid=0'
    );
    query.setQuery("select *");
    query.send(drawDashboard);
  },
  packages: ['controls', 'table']
});
function drawDashboard(response) {
  if (response.isError()) {
    console.log('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
    return;
  }
  var data = response.getDataTable();
  var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard-div'));
  var percentFormatter = new google.visualization.NumberFormat({
    pattern: '#,###.##%'
  });
  percentFormatter.format(data, 1);
  percentFormatter.format(data, 3);
  var numberFormatter = new google.visualization.NumberFormat({
    pattern: '#.##'
  });
  numberFormatter.format(data, 7);
  numberFormatter.format(data, 8);
  var colorFormatter = new google.visualization.ColorFormat();
  colorFormatter.addRange(-20000, 0, 'white', 'orange');
  colorFormatter.addRange(20000, null, 'red', '#33ff33');
  colorFormatter.format(data, 8);
  colorFormatter.format(data, 9);
  colorFormatter.format(data, 10);
  colorFormatter.format(data, 11);
  var table = new google.visualization.ChartWrapper({
    chartType: 'Table',
    containerId: 'table-div',
    options: {
      allowHtml: true
    }
  });
  var donutSlider = new google.visualization.ControlWrapper({
    controlType: 'DateRangeFilter',
    containerId: 'slider-div',
    options: {
      filterColumnLabel: 'Date'
    }
  });
  dashboard.bind(donutSlider, [table]);
  dashboard.draw(data);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="dashboard-div">
  <div id="slider-div"></div>
  <div id="table-div"></div>
</div>

相关文章：