更改 Google 可视化动态图表中气泡的颜色答案

【问题标题】：Change the colour of bubbles in Google visualization motion chart更改 Google 可视化动态图表中气泡的颜色
【发布时间】：2017-06-09 01:32:52
【问题描述】：

我有一种方法可以定义由 Google 可视化 API 提供的动态图表中气泡的颜色吗？我不想使用默认配色方案。

提前谢谢你。

【问题讨论】：

标签： api graph visualization

【解决方案1】：

我还没有找到一种内置的方法来做到这一点。但是，您可以为每个气泡分配一个“颜色”变量。然后您可以将气泡的颜色设置为此变量。我发现对于 3 个气泡，将一个设置为 1，另一个设置为 1.5，第三个设置为 3 个项目合理（在默认配色方案中，黄色项目非常差）。这种方法使您可以有限地控制配色方案。

【讨论】：

感谢您抽出时间来解决这个安德鲁问题。我很快就会试试这个。
我有一个例子，但没有足够的荣誉来发布图片。有机会我会把它上传到我的博客上并在这里放一个链接。

【解决方案2】：

现在是 2017 年，我还没有找到一个好的更新。所以这是我想出的解决方案。 HTH。

#views.py
# Bubble Chart: ID, X, Y Color, Size
data.append(['ID', 'X', 'Y', 'Category', 'Z'])
data.append(['', 0, 0, 'Cat 1', 0]) #<-- the order of 
data.append(['', 0, 0, 'Cat 2', 0]) #<-- these fakeout items
data.append(['', 0, 0, 'Cat 3', 0]) #<-- is important
data.append(['', 0, 0, 'Cat 4', 0]) #<-- Blue, Red, Orange, Green - in that order

... 对于源代码中的 r： data.append(r.a, r.b, r.c, r.d, r.e)

return render(
    request,
    'Template.html',
    {
        'title':'',
        'year':datetime.now().year,
        'org': org,
        'data': json.dumps(data),
    }

#in the scripts block of template.html

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
    google.charts.load('current', {'packages':['corechart']});
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {

        var data = google.visualization.arrayToDataTable({{data|safe}});

        var options = {
            title: 'Bubble By Category Strategy',
            hAxis: { title: 'X', ticks: [{v: 0, f:''}, {v: 1, f:'L'}, {v: 2, f:'M'}, {v: 3, f:'H'}, {v: 4, f:''}] },
            vAxis: { title: 'Y', ticks: [{v: 0, f:''}, {v: 1, f:'L'}, {v: 2, f:'M'}, {v: 3, f:'H'}, {v: 4, f:''}]  },
            bubble: {
                textStyle: {
                    fontSize: 11,
                    fontName: 'Lato',
                }
            }
        };

        var chart = new google.visualization.BubbleChart(document.getElementById('riskChart'));
        chart.draw(data, options);
    }

</script>

【讨论】：