在不使用arrayToDataTable（）的情況下修改Google柱形圖中的列顏色

Question

我從Google Fusion Table中解析了我們的數據，因此無法使用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

請參閱文檔以了解顏色列

要設置條形顏色，請創建具有“角色”樣式的列：

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>