the

the

关注
发信
关注(28)粉丝(399)

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

本文介绍了Google树状图:想要将节点的颜色设置为红色，绿色和琥珀色的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

  google.load('visualization'，'1'，{packages:['treemap']，callback:drawVisualization});函数drawVisualization(){//创建并填充数据表.var dataArray = [];dataArray.push(['部门名称'，'父母'，'目标数'，'颜色']);dataArray.push([['Goals by Team'，null，0，0]);dataArray.push(['Sales'，'Teams by Team'，2，'red']);dataArray.push([['Finance'，'Goals by Team'，6，'green']);dataArray.push(['售前'，'团队目标'，8，'红色']);dataArray.push([['Technology'，'Goals by Team'，4，'amber']);dataArray.push([[管理]，'团队目标'，1，'琥珀']);var data = google.visualization.arrayToDataTable(dataArray);//创建并绘制可视化效果.var treemap = new google.visualization.TreeMap(document.getElementById('visualization'));treemap.draw(data，{minColor:'红色'，midColor:橙色"，maxColor:绿色"，headerHeight:0，fontColor:'黑色'，showScale:true});google.visualization.events.addListener(treemap，'select'，showGoalsByDepartment);google.visualization.events.trigger(treemap，'select'，null);函数showGoalsByDepartment(){var selection = treemap.getSelection();if(选择&& selection.length> 0){var node_name = data.getValue(selection [0] .row，0);$ location.path('departmentGoal/'+ node_name);$ scope.$ apply();}}}

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

任何帮助表示赞赏.

解决方案

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

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

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

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

  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>售前</text></g>

为了分配特定的颜色，我们遍历所有< rect> 元素，
对于每个< rect> ，我们找到关联的< text> 标签，
然后返回原始数据表，并使用 getFilteredRows 查找具有该标签的行.
然后我们可以从该行中提取颜色，并将其分配给< rect> .

  Array.prototype.forEach.call(container.getElementsByTagName('rect')，function(rect){var textElements = rect.parentNode.getElementsByTagName('text');如果(textElements.length> 0){var dataRows = data.getFilteredRows([{列:0，值:textElements [0] .textContent}]);如果(dataRows.length> 0){rect.setAttribute('fill'，data.getValue(dataRows [0]，3));}}});

最终，图表会在有活动时(例如'select')将我们的颜色重新更改为默认渐变.
要覆盖，我们可以使用 MutationObserver .

  var观察者=新的MutationObserver(addColors);Observer.observe(container，{childList:是的，子树:true});

请参阅以下工作片段 

  google.charts.load('current'，{packages:['treemap']，callback:drawVisualization});函数drawVisualization(){var dataArray = [];dataArray.push(['部门名称'，'父母'，'目标数'，'颜色']);dataArray.push([['Team by Team'，null，0，null]);dataArray.push([[Sales]，'Goals by Team'，2，'Red']);dataArray.push([['Finance'，'Goals by Team'，6，'Green']);dataArray.push(['售前'，'团队目标'，8，'红色']);dataArray.push([['Technology'，'Goals by Team'，4，'OrangeRed']);dataArray.push([['Management'，'Teams 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观察者=新的MutationObserver(addColors);Observer.observe(container，{childList:是的，子树:true});函数addColors(){Array.prototype.forEach.call(container.getElementsByTagName('rect')，function(rect){var textElements = rect.parentNode.getElementsByTagName('text');如果(textElements.length> 0){var dataRows = data.getFilteredRows([{列:0，值:textElements [0] .textContent}]);如果(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);函数showGoalsByDepartment(){var selection = treemap.getSelection();if(选择&& selection.length> 0){var node_name = data.getValue(selection [0] .row，0);//$location.path('departmentGoal/'+node_name);//$ scope.$ apply();}}treemap.draw(view，{showScale:否，headerHeight:0，fontColor:'黑色'});}  
 < script src ="https://www.gstatic.com/charts/loader.js"></script>< div id ="visualization"></div>

注释

1)应该不再使用脚本库 jsapi .

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

请参见发行说明 ... 

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

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

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

3) 琥珀色不是有效的 html颜色名称， OrangeRed 代替了上面的颜色.

4)，上述代码段中的色标已删除，因为它与我们的特定颜色分配不匹配.

  showScale:false

I am using Google Treemap to show department wise data. I am not being able to set the color of nodes in which I want. I don't know whether colors are decided by treemap itself.

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();
    }
    }
}

But the colors of nodes are not being shown as assigned.

Any help appreciated.

解决方案

colors for the treemap are assigned on a gradient scale,
there are no standard options that will allow assignment of a specific color to each node.

however, the chart can be modified manually, after it has been drawn.

first, the last color column in the data table should be a number,
this is what the treemap uses to determine the value of the gradient color.
the treemap will throw an error if a string is used.

as such, we will use a data view to exclude this column when drawing the chart. 

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

next, when the chart is drawn, <rect> elements are used to draw each node,
along with a <text> element for the label.
both elements will be stored in a <g> element, similar to the following. 

<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>

in order to assign our specific color, we loop through all the <rect> elements,
for each <rect> we find the associated <text> label,
then go back to the original data table and find the row with that label using getFilteredRows.
then we can pull the color from that row, and assign it to the <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));
    }
  }
});

finally, the chart will change our color back to the default gradient anytime there is activity, such as 'select'.
to override, we can use a MutationObserver. 

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

see following working snippet 

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>

notes

1) the script library jsapi should no longer be used. 

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

see the release notes... 

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

this will only change the load statement, see snippet above.

2) event listeners, such as 'select', should be assigned before the chart is drawn.

3) Amber is not a valid html color name, OrangeRed was used above instead.

4) the color scale was removed in the above snippet, since it will not match our specific color assignment. 

showScale: false

这篇关于Google树状图:想要将节点的颜色设置为红色，绿色和琥珀色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

10-20 20:35
Powered by LMLPHP ©2024 the 0.008662