Google柱形圖動態數據的隨機顏色

Question

我試圖找出一種方法來生成帶有不同/隨機顏色的每一列的google柱形圖。 以下是我生成圖表的方式的詳細信息：

客戶端/ JavaScript的：

使用google.visualization.ChartWrapper繪制圖表。 這是代碼片段：

var wrapper = new google.visualization.ChartWrapper({
    chartType : chartType,
    dataSourceUrl : url, 
    containerId : 'chartDiv',
    options : chartOptions
});

數據是從用Java編寫的rest服務（上面的url參數）中獲取的。

到目前為止，我嘗試了以下幾件事，但是沒有運氣：

試圖在選項數組下的javascript代碼中添加一些隨機顏色：

chartOptions = {
            title : name,
            is3D : true,
           colors: ['red','yellow', 'blue'],
           }

這只會將所有列塗成紅色。

服務器端/ Java

嘗試在從Java代碼發送回的數據中添加com.google.visualization.datasource.datatable.Datatable自定義樣式屬性：

data.setCustomProperty("style", "color: darkred"); // thought to add randomely genrated colors if it worked

但這不會影響圖表顏色，並且所有列均以默認藍色顯示。

官方文檔中提供的示例包含靜態數據，無法找到正確的方法。

Answer 1

您可以使用樣式角色自定義這些顏色，例如：

var data = google.visualization.arrayToDataTable([
     ['Element', 'Density', { role: 'style' }],
     ['Copper', 8.94, '#b87333'],            // RGB value
     ['Silver', 10.49, 'silver'],            // English color name
     ['Gold', 19.30, 'gold'],
     ['Platinum', 21.45, 'color: #e5e4e2' ], // CSS-style declaration
  ]);

工作實例

 google.load('visualization', '1'); // Don't need to specify chart libraries! google.setOnLoadCallback(drawVisualization); function drawVisualization() { getChartData(function(data){ var wrapper = new google.visualization.ChartWrapper({ chartType: 'ColumnChart', dataTable: data, options: { 'title': 'Density of Precious Metals, in g/cm^3', }, containerId: 'vis_div' }); wrapper.draw(); }); } function getChartData(complete) { $.getJSON('https://gist.githubusercontent.com/vgrem/f5b04c1c55b15ad1167f/raw/d04d79c1d4d0e9f3463f23d779d23fcdab89adff/density.json', function (json) { var dataTable = new google.visualization.DataTable(json); complete(dataTable); }); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <div id="vis_div" style="width: 600px; height: 400px;"></div> 

JSON數據文件： density.json

Answer 2

感謝Vadim分享了json響應，這實際上幫助我在java中完成了它：

除了我通常的專欄，我還向DataTable添加了另外一列，如下所示：

ColumnDescription color = new ColumnDescription("", ValueType.TEXT, "");
color.setCustomProperty("role", "style");
data.addColumn(color);

並且在向DataTable添加行時，我添加了隨機顏色：

data.addRowFromValues( dataEntry, datatypeCountMap.get(dataEntry), getRandomColor());

最終得到了一個具有單個系列的柱形圖，但是每個柱形都有不同的顏色。

注意：我對LineChart使用了相同的邏輯，但是使用不同的顏色看起來效果並不理想。