Google Visualization Column Chart set a data colum

问题:

I have a Google Visualization Column Chart from a query that works fine. I can set the a columns with a style role after the query by using the code snippet below. It adds a new column to the query data and sets the role as "Style". This colors each of the column chart bars accordingly. But I want to be able to use one of my query columns "C" for example as the color code and not have to add it afterward. I can't seem to get this to work. Any ideas? I posted more of my code below the snippet so you can see where I'm coming from. Thanks so much guys for any help you can give. Brandon

  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.

回答1:

I'm not sure how you would add this to a column in the query but...

using a DataView with a calculated column should work...

Assumes the value you want to test is in the second column -- index 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;';
    }
  }
}]);