google-apps-script - Google 可视化柱形图将查询中的数据列设置为角色 : "Style"

Question

我有一个来自查询的 Google 可视化柱形图，效果很好。我可以使用下面的代码片段在查询后设置具有样式角色的列。它向查询数据添加一个新列并将角色设置为“样式”。这会相应地为每个柱形图条着色。但是我希望能够使用我的查询列之一“C”作为颜色代码，而不必在之后添加它。我似乎无法让它工作。有任何想法吗？我在代码片段下方发布了更多代码，以便您了解我的来源。非常感谢你们提供的任何帮助。布兰登

  var data = response.getDataTable();

            data.addColumn({type: "string", role: "style" });
            data.setCell(0,2,'red');
            data.setCell(1,2,'orange');
            data.setCell(2,2,'green');
            data.setCell(3,2,'yellow');

// More code above this, but I ommited it.  

function drawDashboard() {
         var query = new google.visualization.Query(
         'URL');


     query.setQuery('SELECT A, B, C');
     query.send(handleQueryResponse);
      }

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

  var data = response.getDataTable();

            data.addColumn({type: "string", role: "style" });
            data.setCell(0,2,'red');
            data.setCell(1,2,'orange');
            data.setCell(2,2,'green');
            data.setCell(3,2,'yellow');

        // Create a dashboard.

        var dashboard = new google.visualization.Dashboard(
            document.getElementById('dashboard_div'));

        // Create a range slider, passing some options
        var scoreSlider = new google.visualization.ControlWrapper({
            controlType: 'NumberRangeFilter',
            containerId: 'filter_div',
            options: {
            filterColumnLabel: 'Class AVG'
               }
        });

        var ClassFilter = new google.visualization.ControlWrapper({
            controlType: 'CategoryFilter', 
            containerId: 'Classfilter_div',
            options: {
            'filterColumnLabel': 'Teacher Name','ui': { 'labelStacking': 'veClasscal','allowTyping': true,'allowMultiple': true
               }
        }});

        // Create a Column Bar chart, passing some options
        var columnChart = new google.visualization.ChartWrapper({
            chartType: 'ColumnChart',
            containerId: 'chart_div',
            options: {
                title: 'Math Proficiency by Class',
                height: 320,
                width: 500,
                chartArea:{left:"10%",top:"10%",width:"80%",height:"60%"},
                hAxis: {textStyle: {fontSize:14}, title: 'Teacher Name', titleTextStyle: {fontSize:14}, textStyle: {fontSize:14}},
                vAxis: {minValue: 0, maxValue: 100, title: 'Math Proficiency AVG', titleTextStyle: {fontSize:14}, textStyle: {fontSize:14}},
                legend: {position: 'none'},
                animation: {duration:1500, easing:'out'},
                colors: ['#a4c2f4','#3c78d8']
            },
               view: {columns: [0, 1, 2]}
        });

        // Define a table
        var table = new google.visualization.ChartWrapper({
          chartType: 'Table',
          dataTable: data,
          containerId: 'table_div',
          options: {
          width: '400px'
               },
                 view: {columns: [0, 1,]}
         });

        // Establish dependencies, declaring that 'filter' drives 'ColumnChart',
        // so that the column chart will only display entries that are let through
        // given the chosen slider range.

        dashboard.bind([scoreSlider], [table, columnChart]);
        dashboard.bind([ClassFilter], [table, columnChart]);

        // Draw the dashboard.
        dashboard.draw(data);

      }// More code below this, but I ommited it.

Answer 1

我不确定如何将它添加到查询的列中，但是...

使用 DataView使用计算列应该可以...

假设您要测试的值在第二列 -- 索引 1

var data = response.getDataTable();

var view = new google.visualization.DataView(data);

view.setColumns([0, 1, {
  type: "string",
  role: "style",
  calc: function (dataTable, rowIndex) {
    if (dataTable.getValue(rowIndex, 1) < 0.69) {
      return 'color: red;';
    } else if ((dataTable.getValue(rowIndex, 1) >= 0.69) && (dataTable.getValue(rowIndex, 1) <= 0.79)) {
      return 'color: yellow;';
    } else {
      return 'color: green;';
    }
  }
}]);