javascript - Google 气泡图未检测列 Angular 色

Question

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

为此，我添加了一个column-role:style。这是我的第六专栏

   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对于气泡图

不支持列 Angular 色

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

type: 'string' --> A string that identifies bubbles in the same series. Use the same value to identify all bubbles that belong to the same series; bubbles in the same series will be assigned the same color. Series can be configured using the series option.

请使用以下工作片段:type: 'string'

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();
}

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

<小时/>

type: 'number' --> A value that is mapped to an actual color on a gradient scale using the colorAxis option.

使用以下方法查看工作片段:type: 'number'

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();
}

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