Question

我正在尝试找出一种方法来生成谷歌柱形图，每列都有不同/随机颜色。以下是我生成图表的方式的详细信息：

客户端/使用Javascript：

使用google.visualization.ChartWrapper绘制图表。以下是代码段：

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

从用java编写的休息服务（上面的url param）获取数据。

到目前为止，我尝试了几件事，但没有运气：

尝试在options array下的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

您可以使用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
  ]);

工作示例

＆＃13;

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);
    });
}

＆＃13;

<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>

＆＃13;

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使用了相同的逻辑，但使用不同的颜色看起来不太好。

谷歌柱形图随机颜色为动态数据

2 个答案: