更改Google可视化运动图表中气泡的颜色

发布于 2024-09-14 21:10:56 字数 104 浏览 6 评论 0原文

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

先感谢您。

I there a way where by I can define the colours of bubbles in a motion chart provided by Google visualization API ? I do not want to use the default colour scheme.

Thank you in advance.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

我家小可爱 2024-09-21 21:10:56

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

I've not found an inbuilt way to do this. However, what you can do is assign each bubble a "colour" variable. Then you can set the colour of the bubbles to this variable. I have found that for 3 bubbles, setting one to 1, another to 1.5 and the third to 3 projects reasonable well (on the default colour scheme, yellow projects very poorly). This approach gives you limited control over the colour scheme.

情感失落者 2024-09-21 21:10:56

现在已经是 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(ra, rb, rc, rd, re)

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>

It's 2017 and I have yet to find a good update for this. So here is the solution I came up with. 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

... for r in source:
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>
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文