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

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

客户端/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

但这对图表的颜色没有任何影响，它以默认的蓝色显示所有列

---

官方文档中提供的示例包含静态数据，无法找到正确的方法。

您可以使用自定义这些颜色，例如：

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'）；//不需要指定图表库！
setOnLoadCallback（drawVisualization）；
函数drawVisualization（）{
getChartData（函数（数据）{
var wrapper=new google.visualization.ChartWrapper({
chartType:“ColumnChart”，
数据表：数据，
选项：{
‘标题’：‘贵金属密度，单位为g/cm^3’，
},
集装箱运输：“vis_div”
});
wrapper.draw（）；
});
}
函数getChartData（完整）{
$.getJSON（'https://gist.githubusercontent.com/vgrem/f5b04c1c55b15ad1167f/raw/d04d79c1d4d0e9f3463f23d779d23fcdab89adff/density.json，函数（json）{
var dataTable=new google.visualization.dataTable（json）；
完成（数据表）；
});
}

---

感谢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());

最后得到了一个单一系列的柱形图，但每列的颜色不同

---

注意：我对折线图使用了相同的逻辑，但不同的颜色看起来不太好

谢谢！瓦迪姆。我从你的density.json得到了帮助。我用另一个答案来说明我是如何通过java代码实现的