пузырьковая диаграмма визуализации Google меняет цвет легенды в зависимости от значения - PullRequest
Новая
       31

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

1 голос
/ 17 июня 2019

Я реализовал гугл пузырьковую диаграмму, она работает нормально, но мне нужно изменить значение площади пузырька / легенды на основе цвета. 

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

   <body>
      <div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
      </div>
      <script language = "JavaScript">
         function drawChart() {

               var data = google.visualization.arrayToDataTable([
        ['ID', 'Life Expectancy', 'Fertility Rate', 'Area',     ],
        ['CAN',    80.66,              1.67,      'Europe',],
        ['DEU',    79.84,              1.36,      'Europe'        ],
        ['IRN',    72.49,              1.7,       'Middle East'    ],
        ['IRQ',    68.09,              4.77,      'Middle East'    ],
        ['ISR',    81.55,              2.96,      'Middle East'   ],
        ['RUS',    68.6,               1.54,      'Europe',         ],
        ['USA',    78.09,              2.05,      'North America']
      ]);

            // Set chart options
            var options = {
               'title':'Age vs Weight',
                'width':550,
               'height':400,
                legend: { 
                  position : 'right'
               },
               colors: ['green', 'yellow','red','black']
            };

            // Instantiate and draw the chart.
            var chart = new google.visualization.BubbleChart(document.getElementById('container'));
            chart.draw(data, options);
         }
         google.charts.setOnLoadCallback(drawChart);


         google.charts.load('current',{'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

      </script>
   </body>
</html>

в настоящий момент цвет установлен, но установлен случайный цвет. Я хочу сделать Европу красным, Ближний Восток зеленым, а Северную Америку желтым

Я не могу найти опцию для визуализации: пузырьковая диаграмма, но для Column Chart работает, например. 

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
      ]);

есть ли подобная опция для bubble стиля добавления диаграммы в массив

1 Ответ

1 голос
/ 17 июня 2019

формат данных для BubbleChart не допускает роли столбцов , например 'style'

однако вы можете управлять назначением цвета, используя опцию colors.

цвета в массиве colors должны быть в том же порядке, в котором серии появляются в данных.

, поскольку 'Europe' появляется первым, 'Middle East' вторым и последним 'North America',
цвета должны быть в следующем порядке ... 

colors: ['red', 'green', 'yellow']

см. Следующий рабочий фрагмент ... 

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['ID', 'Life Expectancy', 'Fertility Rate', 'Area'],
    ['CAN', 80.66, 1.67, 'Europe'],
    ['DEU', 79.84, 1.36, 'Europe'],
    ['IRN', 72.49, 1.70, 'Middle East'],
    ['IRQ', 68.09, 4.77, 'Middle East'],
    ['ISR', 81.55, 2.96, 'Middle East'],
    ['RUS', 68.6,  1.54, 'Europe'],
    ['USA', 78.09, 2.05, 'North America']
  ]);

  // Set chart options
  var options = {
    title: 'Age vs Weight',
    width: 550,
    height: 400,
    legend: {
      position : 'right'
    },
    colors: ['red', 'green', 'yellow']
  };

  var chart = new google.visualization.BubbleChart(document.getElementById('container'));
  chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="container"></div>

РЕДАКТИРОВАТЬ

для обработки динамических данных используйте объект для сопоставления цветов с областью ... 

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['ID', 'Life Expectancy', 'Fertility Rate', 'Area'],
    ['USA', 78.09, 2.05, 'North America'],
    ['IRN', 72.49, 1.70, 'Middle East'],
    ['CAN', 80.66, 1.67, 'Europe'],
    ['DEU', 79.84, 1.36, 'Europe'],
    ['IRQ', 68.09, 4.77, 'Middle East'],
    ['ISR', 81.55, 2.96, 'Middle East'],
    ['RUS', 68.6,  1.54, 'Europe'],
  ]);

  var colorMap = {
    'Europe': 'red',
    'Middle East': 'green',
    'North America': 'yellow'
  };
  var colors = [];

  for (var i = 0; i < data.getNumberOfRows(); i++) {
    var area = data.getValue(i, 3);
    if (colors.indexOf(colorMap[area]) === -1) {
      colors.push(colorMap[area]);
    }
  }

  var options = {
    title: 'Age vs Weight',
    width: 550,
    height: 400,
    legend: {
      position : 'right'
    },
    colors: colors
  };

  var chart = new google.visualization.BubbleChart(document.getElementById('container'));
  chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="container"></div>
...