Google Bubble Chart не определяет роли столбцов

Question

Google Bubble Chart не определяет роли столбцов

1

У меня есть диаграмма Google Bubble, следующая за структурой данных, приведенной в документации. В этом случае я хочу установить пользовательский пользовательский цвет для каждого пузыря и не основываться на легенде/сериале.

Для этого я добавил стиль 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. Что можно сделать по этому поводу?

Hackstarky 02 июнь 2017, в 09:28

Источник

Теги:

javascript

charts

google-visualization

bubble-chart

1 ответ

Ещё вопросы

WhiteHat · Answer 1 · 2017-06-02T09-16-00.000Z

проверьте формат данных для BubbleChart

поддержка столбцов не поддерживается

столбец 3 описывает цвет пузырьков, может быть строкой или номером...

type: 'string' → Строка, которая идентифицирует пузырьки в той же серии. Используйте одно и то же значение, чтобы идентифицировать все пузырьки, принадлежащие к той же серии; пузырькам в той же серии будет присвоен один и тот же цвет. Серии можно настроить с помощью опции серии.

см. следующий рабочий фрагмент, используя: 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' → Значение, которое отображается на фактический цвет в градиентной шкале, используя параметр colorAxis.

см. следующий рабочий фрагмент, используя: 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>