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

Question

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

Благодарим вас заблаговременно.

Answer 1

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

Answer 2

Это 2017 год, и мне еще предстоит найти хорошее обновление для этого. Итак, вот решение, которое я придумал. НТН.

#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 

... для г в источнике: 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>