Google chart API: Set values of node labels in Sankey diagram

问题

I am trying to create a simple Sankey diagram showing flows between two sets of nodes, and would like the two sets to have the same names. However, this isn't allowed (it brings up a "Cycle found in rows" error), so I add "2" to the names of the nodes in the second set, like so:

        function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'From');
        data.addColumn('string', 'To');
        data.addColumn('number');
        data.addRows([
            ['foo', 'foo2', 6],
            ['bar', 'bar2', 4],
            ['foo', 'bar2', 6],
            ['bar', 'foo2', 4]
        ]);

        var chart = new google.visualization.Sankey(document.getElementById('sankey_basic'));
        chart.draw(data);
      }

However, I don't want the node labels to say "foo2" and "bar2" -- I just want them to say "foo" and "bar". In some cases in Google Visualization API you can solve this problem with {v: 'foo2', f: 'foo'} and {v: 'bar2', f: 'bar'}, but that doesn't work here. Is there any way I can do this?

回答1:

try using a space at the end...

['foo', 'foo ', 6],
['bar', 'bar ', 4],
['foo', 'bar ', 6],
['bar', 'foo ', 4]

see following working snippet...

google.charts.load('current', {
  packages: ['sankey']
}).then(function () {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'From');
  data.addColumn('string', 'To');
  data.addColumn('number');
  data.addRows([
    ['foo', 'foo ', 6],
    ['bar', 'bar ', 4],
    ['foo', 'bar ', 6],
    ['bar', 'foo ', 4]
  ]);

  var chart = new google.visualization.Sankey(document.getElementById('sankey_basic'));
  chart.draw(data);
});

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

来源：https://stackoverflow.com/questions/59250950/google-chart-api-set-values-of-node-labels-in-sankey-diagram

标签

javascript

charts

google-visualization

data-visualization

sankey-diagram