如何使用图表包装函数有条件地格式化Google可视化表格单元格？ [英] How do I conditionally format Google visualization table cells using chart wrapper function?

问题描述

我对Google Visualization API的世界很陌生，希望有人能够帮助我有条件地格式化我的谷歌可视化表格中的单元格颜色。我已经能够改变不同列显示的数字格式，但没有颜色格式的运气。我正在使用arrayToDataTable和chartwrapper函数来显示我从电子表格中查询的一些数据。

是否需要使用colorFormat变量或chartwrapper函数来更改不接受格式的内容？

function drawDashboard（response）{$（'＃main-heading'）。addClass（hidden）; if（response == null）{alert（'Error：Invalid source data。'）return; } else {//将电子表格内容（数组）转换为DataTable对象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（数据）; 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'}}）; //设置控件和图表之间的依赖关系dashboard.bind（donutSlider，[table]）; //绘制仪表板的所有可视化组件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 （））;返回; } 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>

$ b

I am new to the world of the Google Visualization Api and was hoping someone can help me conditionally format the color of cells in my google visualization table. I have been able to change the number format that different columns display, but am not having such luck with color formatting. I am using the arrayToDataTable and chartwrapper functions to display some data I have queried from a spreadsheet.

Is it something I need to change with the colorFormat variable or the chartwrapper function that in not accepting the formatting? Thank you in advance!

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

解决方案

looks like you're using the using the formatter correctly
but the parameters are a little off

also need allowHtml: true in the Table options

see following example using the linked spreadsheet...

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>

这篇关于如何使用图表包装函数有条件地格式化Google可视化表格单元格？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！