谷歌柱狀圖動態數據隨機顏色

我想弄清楚一種方式來生成谷歌柱狀圖與每列不同/隨機的顏色。下面是我生成圖表的方式的細節：谷歌柱狀圖動態數據隨機顏色

客戶端/ JavaScript的：

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

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

數據是從一個用java寫的休息服務（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

但這造成了圖表顏色沒有影響，它顯示所有列默認爲藍色。

在官方文檔中給出的示例是靜態數據，無法找到正確的方法。

來源

2015-10-08 Juned Ahsan

你可以自定義這些顏色與style role，例如：

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

來源

2015-10-08 20:23:25

謝謝！瓦迪姆。我從你的density.json獲得了幫助。我正在提出另一個答案來說明我是如何通過java代碼實現的 –

感謝瓦迪姆分享JSON響應，這實際上幫我做這件事的java：

從我平時的列

除此之外，我增加了一個以數據表，就像這樣：

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

並添加行到DataTable的時候，我已經添加隨機顏色：

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

終於和單系列柱形圖但每列都有不同的顏色。

注意：我對LineChart使用了相同的邏輯，但它看起來不太好用不同的顏色。

來源

2015-10-09 00:42:43

谷歌柱狀圖動態數據隨機顏色

回答

相關問題