javascript - 动态数据的谷歌柱形图随机颜色

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

您可以使用 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 data file: density.json