修改列的顏色在谷歌柱形圖沒有arrayToDataTable（）

Question

我從谷歌的融合表分析我們的數據，所以我不能利用arrayToDataTable（）（我認爲）單獨更改列顏色（其它性質）。任何人都知道如何選擇列，然後修改它們的屬性（包括隱藏它們）。謝謝。

這裏是爭取在融合表中的數據，並繪製圖表代碼：

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>