Question

我已经实现了Google气泡图的正常工作，但是我需要更改基于气泡/图例颜色的Area值。

<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图表在数组中添加样式是否有任何类似的选项

Answer 1

BubbleChart的{{3}}不允许data format，例如'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>

谷歌可视化气泡图根据值更改图例颜色

1 个答案: