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

【问题标题】：Google column chart random colors for dynamic data动态数据的谷歌柱形图随机颜色
【发布时间】：2015-10-08 00:40:47
【问题描述】：

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

客户端/Javascript：

使用google.visualization.ChartWrapper绘制图表。这是代码sn-p：

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

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

官方文档中给出的示例是静态数据，无法找到正确的方法。

【问题讨论】：

标签： javascript java google-visualization

【解决方案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 数据文件：density.json

【讨论】：

谢谢！瓦迪姆。我从你的 density.json 那里得到了帮助。我正在提出另一个答案来展示我如何通过 java 代码实现它

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

【讨论】：