Изменение цветов колонок в таблице столбцов Google без arrayToDataTable()

Question

Я проанализировал наши данные из таблицы Google Fusion, поэтому я не могу использовать arrayToDataTable() (я думаю), чтобы индивидуально изменять цвета колонок (среди других свойств). Кто-нибудь знает, как выбрать столбцы, а затем изменить их свойства (в том числе скрыть их). Благодарю.

Вот код для приведения в данной Fusion таблицы и рисунка диаграммы:

google.load('visualization', '1', { 
    packages: ['corechart', 'bar'] 
}); 

google.setOnLoadCallback(drawVisualization); 

var data; 
var chart; 
var views = {}; 

var options = { 
    titlePosition: 'none', 
    backgroundColor: '#E5E3DF', 
    tooltip: { 
     isHtml: true 
    }, 
    legend: { 
     position: 'none' 
    }, 
    vAxis: { 
     title: "Avg. Confidence Level", 
     format: 'decimal', 
     minValue: 0 
    }, 
    hAxis: { 
     title: "Master Level Universities" 
    }, 
    height: 500 
}; 

function drawVisualization() { 
    chart = new google.visualization.ColumnChart(document.getElementById('chart_div')); 

    var query = "SELECT ShortName, Thesis FROM 1BslkTKgWIr0jwxR8odybI2fvvLSKnfSE8MylFzDi"; 
    var queryText = encodeURIComponent(query); 
    var opts = { 
     sendMethod: 'auto' 
    }; 
    var gvizQuery = new google.visualization.Query(
     'http://www.google.com/fusiontables/gvizdata?tq=', opts); 

    gvizQuery.setQuery(query); 


    gvizQuery.send(function (e) { 

     data = e.getDataTable(); 
     data = new google.visualization.DataView(data); 
     data.setColumnProperty(0, "ShortName", 'color: #e5e4e2'); //maybe this is how I modify column, but it spits out error. 

     chart.draw(data, options); 
    }); 
} 

Answer 1

Смотрите документацию для coloring columns

установить планку цвет, создать столбец с «ролью» стиль:

data.addColumn({type: "string", role: "style" }); 

Затем установите его в нужное значения:

data.setCell(0,2,'red'); 
data.setCell(1,2,'purple'); 
data.setCell(2,2,'green'); 
data.setCell(3,2,'yellow'); 

фрагмент кода:

google.load('visualization', '1', { 
 
    packages: ['corechart', 'bar'] 
 
}); 
 

 
google.setOnLoadCallback(drawVisualization); 
 

 
var data; 
 
var chart; 
 
var views = {}; 
 

 
var options = { 
 
    titlePosition: 'none', 
 
    backgroundColor: '#E5E3DF', 
 
    tooltip: { 
 
    isHtml: true 
 
    }, 
 
    legend: { 
 
    position: 'none' 
 
    }, 
 
    vAxis: { 
 
    title: "Avg. Confidence Level", 
 
    format: 'decimal', 
 
    minValue: 0 
 
    }, 
 
    hAxis: { 
 
    title: "Master Level Universities" 
 
    }, 
 
    height: 500 
 
}; 
 

 
function drawVisualization() { 
 
    chart = new google.visualization.ColumnChart(document.getElementById('chart_div')); 
 

 
    var query = "SELECT ShortName, Thesis FROM 1BslkTKgWIr0jwxR8odybI2fvvLSKnfSE8MylFzDi"; 
 
    var queryText = encodeURIComponent(query); 
 
    var opts = { 
 
    sendMethod: 'auto' 
 
    }; 
 
    var gvizQuery = new google.visualization.Query(
 
    'http://www.google.com/fusiontables/gvizdata?tq=', opts); 
 

 
    gvizQuery.setQuery(query); 
 

 

 
    gvizQuery.send(function(e) { 
 

 
    data = e.getDataTable(); 
 
    data.addColumn({ 
 
     type: "string", 
 
     role: "style" 
 
    }); //maybe this is how I modify column, but it spits out error. 
 
    data.setCell(0, 2, 'red'); 
 
    data.setCell(1, 2, 'purple'); 
 
    data.setCell(2, 2, 'green'); 
 
    data.setCell(3, 2, 'yellow'); 
 

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

 
    chart.draw(dataView, options); 
 
    }); 
 
}

html, 
 
body, 
 
#chart_div { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://www.google.com/jsapi"></script> 
 
<div id="chart_div"></div>