Google Treemap: хотите поставить цвет узла красным, зеленым и янтарным - PullRequest
Новая
       7

Google Treemap: хотите поставить цвет узла красным, зеленым и янтарным

0 голосов
/ 05 июля 2018

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

google.load('visualization', '1', {packages: ['treemap'], callback: drawVisualization});
function drawVisualization() {
    // Create and populate the data table.
    var dataArray = [];
    dataArray.push(['Department Name', 'Parent', 'Number of Goals', 'color']);
    dataArray.push(['Goals by Team', null, 0, 0]);
    dataArray.push(['Sales', 'Goals by Team', 2, 'red']);
    dataArray.push(['Finance', 'Goals by Team', 6, 'green']);
    dataArray.push(['Pre-Sales', 'Goals by Team', 8, 'red']);
    dataArray.push(['Technology', 'Goals by Team', 4, 'amber']);
    dataArray.push(['Management', 'Goals by Team', 1, 'amber']);

    var data = google.visualization.arrayToDataTable(dataArray);
    // Create and draw the visualization.
    var treemap = new google.visualization.TreeMap(document.getElementById('visualization'));
    treemap.draw(data, {
    minColor: 'red',
    midColor: 'orange',
    maxColor: 'green',
    headerHeight: 0,
    fontColor: 'black',
    showScale: true});

    google.visualization.events.addListener(treemap, 'select', showGoalsByDepartment);
    google.visualization.events.trigger(treemap, 'select', null);
    function showGoalsByDepartment() {
    var selection = treemap.getSelection();
    if (selection && selection.length > 0) {
        var node_name = data.getValue(selection[0].row, 0);
        $location.path('departmentGoal/'+node_name);
        $scope.$apply();
    }
    }
}

Но цвета узлов не отображаются как назначенные.

Любая помощь приветствуется.

1 Ответ

0 голосов
/ 25 июля 2018

цветов для древовидной карты назначаются в градиентной шкале,
нет стандартных опций, которые позволят назначить определенный цвет для каждого узла.

однако, график может быть изменен вручную после того, как он был нарисован.

первый , последний цветной столбец в таблице данных должен быть числом,
это то, что древовидная карта использует для определения значения цвета градиента.
Древовидная карта выдаст ошибку, если используется строка.

как таковой, мы будем использовать представление данных, чтобы исключить этот столбец при рисовании диаграммы. 

var data = google.visualization.arrayToDataTable(dataArray);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, 2]);

следующий , когда рисуется диаграмма, элементы <rect> используются для рисования каждого узла,
вместе с элементом <text> для метки.
оба элемента будут сохранены в элементе <g>, как показано ниже. 

<g style="cursor: default;">
  <rect x="5" y="0" width="480" height="195" stroke="#ffffff" stroke-width="1" fill="Red"></rect>
  <text text-anchor="middle" x="245" y="101.7" font-family="Arial" font-size="12" stroke="none" stroke-width="0" fill="#000000">Pre-Sales</text>
</g>

Чтобы назначить наш конкретный цвет, мы перебираем все элементы <rect>,
для каждого <rect> мы находим ассоциированную метку <text>,
затем вернитесь к исходной таблице данных и найдите строку с этой меткой, используя getFilteredRows.
тогда мы можем вытащить цвет из этой строки и присвоить его <rect>. 

Array.prototype.forEach.call(container.getElementsByTagName('rect'), function(rect) {
  var textElements = rect.parentNode.getElementsByTagName('text');
  if (textElements.length > 0) {
    var dataRows = data.getFilteredRows([{
      column: 0,
      value: textElements[0].textContent
    }]);
    if (dataRows.length > 0) {
      rect.setAttribute('fill', data.getValue(dataRows[0], 3));
    }
  }
});

наконец , график изменит наш цвет обратно на градиент по умолчанию каждый раз, когда есть активность, такая как 'select'.
чтобы переопределить, мы можем использовать MutationObserver. 

var observer = new MutationObserver(addColors);
observer.observe(container, {
  childList: true,
  subtree: true
});

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

google.charts.load('current', {packages:['treemap'], callback: drawVisualization});
function drawVisualization() {
  var dataArray = [];
  dataArray.push(['Department Name', 'Parent', 'Number of Goals', 'color']);
  dataArray.push(['Goals by Team', null, 0, null]);
  dataArray.push(['Sales', 'Goals by Team', 2, 'Red']);
  dataArray.push(['Finance', 'Goals by Team', 6, 'Green']);
  dataArray.push(['Pre-Sales', 'Goals by Team', 8, 'Red']);
  dataArray.push(['Technology', 'Goals by Team', 4, 'OrangeRed']);
  dataArray.push(['Management', 'Goals by Team', 1, 'OrangeRed']);

  var data = google.visualization.arrayToDataTable(dataArray);
  var view = new google.visualization.DataView(data);
  view.setColumns([0, 1, 2]);

  var container = document.getElementById('visualization');
  var treemap = new google.visualization.TreeMap(container);

  var observer = new MutationObserver(addColors);
  observer.observe(container, {
    childList: true,
    subtree: true
  });

  function addColors() {
    Array.prototype.forEach.call(container.getElementsByTagName('rect'), function(rect) {
      var textElements = rect.parentNode.getElementsByTagName('text');
      if (textElements.length > 0) {
        var dataRows = data.getFilteredRows([{
          column: 0,
          value: textElements[0].textContent
        }]);
        if (dataRows.length > 0) {
          rect.setAttribute('fill', data.getValue(dataRows[0], 3));
        }
      }
    });
  }

  google.visualization.events.addListener(treemap, 'select', showGoalsByDepartment);
  google.visualization.events.trigger(treemap, 'select', null);
  function showGoalsByDepartment() {
    var selection = treemap.getSelection();
    if (selection && selection.length > 0) {
      var node_name = data.getValue(selection[0].row, 0);
      //$location.path('departmentGoal/'+node_name);
      //$scope.$apply();
    }
  }

  treemap.draw(view, {
    showScale: false,
    headerHeight: 0,
    fontColor: 'black'
  });
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="visualization"></div>

примечания

1) библиотека скриптов jsapi больше не должна использоваться. 

<script src="https://www.google.com/jsapi"></script>

см. заметки о выпуске ...

Версия Google Charts, которая остается доступной через загрузчик jsapi, больше не обновляется последовательно. Пожалуйста, используйте новый gstatic loader.js с этого момента. 

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

это только изменит оператор load, см. Фрагмент выше.

2) прослушивателям событий, таким как 'select', следует назначить до построения графика.

3) Amber не является допустимым html имя цвета , OrangeRed использовалось выше вместо.

4) в приведенном выше фрагменте была удалена цветовая шкала, поскольку она не будет соответствовать нашему определенному назначению цвета. 

showScale: false
...