Google Charts Sankey - 节点文字样式 [英] Google Charts Sankey - Node text style

问题描述

有没有一种方法可以在Google的Sankey图中用风格角色更改目标节点文本的颜色？目前我有这样的数据设置：

$ p $ [源，目标，标签，样式]
[A，B， Test Label，#ffffff]


我可以改变节点的颜色和链接但不是文字。

d3在这一点上对我来说不是一种选择，整个想法是让节点动起来，使它们在它的位置上一个接一个地出现 - 因此试图改变样式并重新绘制图表。增长表不工作，因为节点改变位置。任何想法？

解决方案

使用标准选项找不到样式个别节点文本 / p>

但是可以手动设置颜色，在绘制图表后 p

通常，图表的'ready'事件可用于知道图表何时完成绘图，但是，图表将恢复为默认的节点文本样式 em>在每一个交互事件中，

如'onmouseover'，'onmouseout'， &安培;取而代之的是，使用突变观察者来更改节点文本，然后选择'select'

任何交互性

请参阅以下工作片段，它将颜色映射到每个节点文本 ...

...

 
   google.charts.load（'current'，{'packages'：['sankey']}）; google。 charts.setOnLoadCallback（drawChart）;函数drawChart（）{var data = new google.visualization.DataTable（）; data.addColumn（'string'，'From'）; data.addColumn（'string'，'To'）; data.addColumn（'number'，'Weight'）; data.addRows（[['A'，'X'，5]，['A'，'Y'，7]，['A'，'Z'，6]，['B'，'X'， 2]，['B'，'Y'，9]，['B'，'Z'，4]]）; var options = {width：600}; var colorMap = {'A'：'cyan'，'X'：'洋红'，'Y'：'yellow'，'Z'：'lime'，'B'：'violet'}; var chartDiv = document.getElementById（'sankey_basic'）; var chart = new google.visualization.Sankey（chartDiv）; var observer = new MutationObserver（function（mutations）{mutations.forEach（function（mutation）{mutation.addedNodes.forEach（function（node）{if（node.tagName ==='text'）{node.setAttribute（'font node.setAttribute（'fill'，colorMap [node.innerHTML]）;}}）;}）;}）; observer.observe（chartDiv，{childList：true，subtree：true}）; chart.draw（data，options）;}  
 
 < script>< / div>< / script> / pre> 

Is there a way to change the color of the target node text with style role in Google's Sankey diagram? Currently I have data setup like this:

[Source, Target, Label, Style] 
[A,B,"Test Label", "#ffffff"]

I am able to change the color of the node and links but not the text.

d3 is not an option for me at this point and the whole idea is to animate the nodes to appear one after the another at its place - hence trying to change the style and re-draw the diagram. Growing the table is not working because the nodes change location. Any ideas?

解决方案

couldn't find a way to style individual Node text using standard options

but the color can be set manually, after the chart is drawn

normally, the chart's 'ready' event can be used to know when the chart has finished drawing,
however, the chart will revert back to the default Node text style on every interactive event,
such as 'onmouseover', 'onmouseout', & 'select'

instead, use a mutation observer to change the Node text on any interactivity

see following working snippet, which maps a color to each Node text...

google.charts.load('current', {'packages':['sankey']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'From');
  data.addColumn('string', 'To');
  data.addColumn('number', 'Weight');
  data.addRows([
    ['A', 'X', 5],
    ['A', 'Y', 7],
    ['A', 'Z', 6],
    ['B', 'X', 2],
    ['B', 'Y', 9],
    ['B', 'Z', 4]
  ]);

  var options = {
    width: 600
  };

  var colorMap = {
    'A': 'cyan',
    'X': 'magenta',
    'Y': 'yellow',
    'Z': 'lime',
    'B': 'violet'
  };

  var chartDiv = document.getElementById('sankey_basic');
  var chart = new google.visualization.Sankey(chartDiv);

  var observer = new MutationObserver(function (mutations) {
    mutations.forEach(function (mutation) {
      mutation.addedNodes.forEach(function (node) {
        if (node.tagName === 'text') {
          node.setAttribute('font-size', '20');
          node.setAttribute('fill', colorMap[node.innerHTML]);
        }
      });
    });
  });
  observer.observe(chartDiv, {
    childList: true,
    subtree: true
  });

  chart.draw(data, options);
}

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

这篇关于Google Charts Sankey - 节点文字样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！