javascript - 如何使用图表包装函数有条件地格式化 Google 可视化表格单元格？

Question

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

是否需要使用不接受格式的 colorFormat 变量或 chartwrapper 函数进行更改？提前致谢!

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);
  }
}

Answer 1

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

在表选项中还需要 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>