javascript - Google Treemap : want to put color of node in red, 绿色和琥珀色

Question

我正在使用 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();
    }
    }
}

但是节点的颜色没有按照分配的方式显示。

感谢任何帮助。

Answer 1

树状图的颜色是按渐变比例分配的，
没有标准选项允许为每个节点分配特定颜色。

但是，图表绘制后可以手动修改。

---

第一个，数据表中最后一个颜色列应该是数字，
这是树形图用来确定渐变颜色值的内容。
如果使用字符串，树形图将抛出错误。

因此，我们在绘制图表时将使用数据 View 来排除此列。

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

---

下一步，绘制图表时，<rect> elements 用于绘制每个节点，
以及 <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>

参见 release notes ...

The version of Google Charts that remains available via the jsapi loader is no longer being updated consistently. Please use the new gstatic loader.js from now on.

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

这只会改变load声明，请参阅上面的片段。

2) 事件监听器，例如 'select' ，应在绘制图表之前进行分配。

3) Amber不是有效的 html color name , OrangeRed上面使用了代替。

4) 上面代码片段中的色阶已被删除，因为它与我们的特定颜色分配不匹配。

showScale: false