Question

我的Google气泡图遵循文档中提供的数据结构。在此，我希望为每个气泡设置用户定义的自定义颜色，而不是基于图例/系列。

为此我添加了一个column-role：style。这是我的第6栏

   data_type_academic = new google.visualization.DataTable();
   data_type_academic.addColumn('string', 'YoI');
   data_type_academic.addColumn('number', 'RC Score');
   data_type_academic.addColumn('number', 'Math Score');
   data_type_academic.addColumn('string', 'Academic Year');
   data_type_academic.addColumn('number', 'No. of Students');
   data_type_academic.addColumn({type: "string", role: "style"});

我插入了我的值（暂时保持填充颜色不变）

  for(i=0;i<Math.ceil(data_json["YoI"].length);i++)
  {

    data_type_academic.setCell(i, 0,''+data_json["YoI"][i]);
    data_type_academic.setCell(i, 1,data_json["RC_Score_academic"][i]);
    data_type_academic.setCell(i, 2,data_json["Math_Score_academic"][i]);
    data_type_academic.setCell(i, 3,''+data_json["Year"][i]);
    data_type_academic.setCell(i, 4,data_json["freq"][i]);
    data_type_academic.setCell(i, 5,"fill-color:#e1e1e1;stroke-width: 100;");   
  }

这似乎没有成功。该图表仍然使用API提供的默认颜色而不是＃e1e1e1。可以做些什么呢？

Answer 1

检查data format是否有BubbleChart

不支持列角色

第3列描述了气泡颜色，可以是字符串或数字......

type: 'string' - ＆gt;用于标识同一系列中的气泡的字符串。使用相同的值来标识属于同一系列的所有气泡;同一系列中的气泡将被分配相同的颜色。可以使用系列选项配置系列。

请参阅以下工作代码段：type: 'string'

＆＃13;

google.charts.load('current', {
  callback: drawChart,
  packages: ['controls', 'corechart']
});

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['ID', 'Life Expectancy', 'Fertility Rate', 'Region',     'Population'],
    ['CAN',    80.66,              1.67,      'North America',  33739900],
    ['DEU',    79.84,              1.36,      'Europe',         81902307],
    ['DNK',    78.6,               1.84,      'Europe',         5523095],
    ['EGY',    72.73,              2.78,      'Middle East',    79716203],
    ['GBR',    80.05,              2,         'Europe',         61801570],
    ['IRN',    72.49,              1.7,       'Middle East',    73137148],
    ['IRQ',    68.09,              4.77,      'Middle East',    31090763],
    ['ISR',    81.55,              2.96,      'Middle East',    7485600],
    ['RUS',    68.6,               1.54,      'Europe',         141850000],
    ['USA',    78.09,              2.05,      'North America',  307007000]
  ]);

  var chart = new google.visualization.ChartWrapper({
    chartType: 'BubbleChart',
    containerId: 'chart_div',
    dataTable: data,
    options: {
      series: {
        'North America': {
          color: '#f44336'
        },
        'Europe': {
          color: '#2196f3'
        },
        'Middle East': {
          color: '#4caf50'
        }
      }
    }
  });
  chart.draw();
}

＆＃13;

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

＆＃13;

type: 'number' - ＆gt;使用colorAxis选项在梯度刻度上映射到实际颜色的值。

请参阅以下工作代码段：type: 'number'

＆＃13;

google.charts.load('current', {
  callback: drawChart,
  packages: ['controls', 'corechart']
});

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['ID', 'X', 'Y', 'Temperature'],
    ['',   80,  167,      120],
    ['',   79,  136,      130],
    ['',   78,  184,      50],
    ['',   72,  278,      230],
    ['',   81,  200,      210],
    ['',   72,  170,      100],
    ['',   68,  477,      80]
  ]);

  var chart = new google.visualization.ChartWrapper({
    chartType: 'BubbleChart',
    containerId: 'chart_div',
    dataTable: data,
    options: {
      colorAxis: {
        colors: ['yellow', 'red']
      }
    }
  });
  chart.draw();
}

＆＃13;

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

＆＃13;

Google Bubble Chart未检测到列角色

1 个答案: