Изменить цвет пузырьков в графике движения Google визуализации

Question

Есть ли способ, которым я могу определить цвета пузырьков в диаграмме движения, предоставляемой API визуализации Google?Я не хочу использовать цветовую схему по умолчанию .

Заранее спасибо.

Answer 1

Я не нашел встроенного способа сделать это.Однако вы можете назначить каждому пузырю переменную «color».Затем вы можете установить цвет пузырьков для этой переменной.Я обнаружил, что для 3 пузырей, при настройке одного на 1, другого на 1,5 и третьего на 3, проекты достаточно хороши (при стандартной цветовой схеме желтые проекты очень плохо).Этот подход дает вам ограниченный контроль над цветовой схемой.

Answer 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 (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>