Можно ли создать графику с помощью Google Charts, где каждый столбец имеет несколько категорий? - PullRequest
Новая
       15

Можно ли создать графику с помощью Google Charts, где каждый столбец имеет несколько категорий?

0 голосов
/ 19 февраля 2019

Я думаю о реализации API Google Charts с PHP для некоторой статистики, в настоящее время есть некоторая графика, но они разработаны непосредственно с помощью CSS, чтобы дать хороший внешний вид:

enter image description here

После поиска Google Chart я подумал о возможности создания одного и того же графика с помощью API, проблема в том, что в каждом столбце графика он разделен на три раздела, о которых я должен сообщить всгруппированный путь на графике.

В документации Google Я не вижу подобного примера, но я думаю, что JSON будет иметь структуру, подобную этой: 

var data = google.visualization.arrayToDataTable
            ([
              ['Month', 'Boards', 'Chairs', 'Speakers'],
              ['January',  {'Morning':80, 'Night':1000, 'Sunday':10}, {'Morning':20, 'Night':500, 'Sunday':60}, {'Morning':40, 'Night':10, 'Sunday':12}],
              ['February', {'Morning':30, 'Night':300, 'Sunday':20}, {'Morning':22, 'Night':60, 'Sunday':61}, {'Morning':90, 'Night':33, 'Sunday':22}],
              ['March']   etc .....
            ]);

Я должен показывать категории «Утро», «Ночь» и «Воскресенье» в каждом столбце, все, что мне нужно, это знать структуру JSON и то, как он выглядит визуально, с помощью API, но я не вижуправильный способ его интерпретации, или, по крайней мере, я не нашел учебник, в котором я объясняю похожий случай, есть ли у кого-нибудь учебник или руководство по разработке аналогичной графики?

Спасибо!:)

1 Ответ

0 голосов
/ 19 февраля 2019

, чтобы получить сведения о Morning, Night и Sunday для отображения над столбцами,
необходимо использовать 'tooltip' роль столбца .
столбец всплывающей подсказки принимает 'string'тип данных.

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

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Month', 'Boards', {type: 'string', role: 'tooltip'}, 'Chairs', {type: 'string', role: 'tooltip'}, 'Speakers', {type: 'string', role: 'tooltip'}],
    ['January', 1090, '80 in the Morning\n1,000 in the night\n10 Sundays', 580, '20 in the Morning\n5000 in the night\n60 Sundays', 62, '40 in the Morning\n10 in the night\n12 Sundays'],
    ['February', 350, '30 in the Morning\n300 in the night\n20 Sundays', 143, '22 in the Morning\n60 in the night\n61 Sundays', 145, '90 in the Morning\n33 in the night\n22 Sundays'],
  ]);

  var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
  var options = {
    colors: ['#ffa726', '#7e57c2', '#7cb342'],
    height: 400,
    legend: {
      position: 'bottom'
    },
    tooltip: {
      trigger: 'both'
    }
  };

  // add selection to make tooltip visible when drawn
  google.visualization.events.addListener(chart, 'ready', function () {
    chart.setSelection([{row: 0, column: 1}]);
  });

  chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
...