Question

我正在使用Google Treemap显示部门的数据。我无法设置所需节点的颜色。我不知道颜色是否由树形图本身决定。

sql_dialect

但是节点的颜色并未显示为已分配。

任何帮助表示赞赏。

Answer 1

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

但是，在绘制图表之后，可以手动对其进行修改。

第一，数据表中的最后一个颜色列应为数字，
这就是树图用来确定渐变颜色值的方法。
如果使用字符串，树形图将引发错误。

这样，在绘制图表时，我们将使用数据视图排除此列。

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>

请参见release notes ...

通过jsapi加载程序仍然可用的Google Charts版本不再保持一致更新。从现在开始，请使用新的静态loader.js。

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

这只会更改load语句，请参见上面的代码段。

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

3） Amber不是有效的html color name，上面使用了OrangeRed。

4），上面的代码段已删除了色标，因为它与我们的特定颜色分配不匹配。

showScale: false

Google树状图：想要将节点的颜色设置为红色，绿色和琥珀色

1 个答案: