colors - 如何在 google chart sankey 图中设置特定注释和/或链接的颜色？

Question

我的数据可能如下所示:

var data = new google.visualization.DataTable();
    data.addColumn('string', 'From');
    data.addColumn('string', 'To');
    data.addColumn('number', 'Customers');
    data.addRows([
      ['BOUGHT FIRST FROM YOU','your customers',29],
      ['bought first from Store1','your customers',9],
      ['bought first from Store2','your customers',8],
      ['bought first from Store3','your customers',4],
      ['your customers','BOUGHT ONLY FROM YOU',27],
      ['your customers','bought later from Store2',9],
      ['your customers','bought later from Store4',7]]);

我想要的按重要性降序排列:

1. 所有以标题中包含“您”的注释开始或结束的链接都应该是一种颜色。
2. 所有标题中包含“你”的笔记都应该是一种颜色。
3. #1 的颜色应该取决于#2。
4. 所有涉及同一家商店的注释都应使用相同的颜色。

为此，我需要独立设置注释和链接的颜色。这可能吗？如果可能的话如何？

---

编辑 1:解决方案

我希望能更直接地控制颜色，但我想这已经是最好的了。颜色实际上以可预测的方式使用(参见代码)，即使注释被重新排序，所以我可以根据要显示的数据创建颜色数组。

基于 WhiteHat 的回答:

google.charts.load('current', {
  callback: function () {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'From');
    data.addColumn('string', 'To');
    data.addColumn('number', 'Customers');
    data.addRows([
      ['BOUGHT FIRST FROM YOU',       // 01 new node -> 1st color
       'your customers',29],          // 02 new node -> 2nd color
      ['bought first from Store1',    // 03 new node -> 3rd color
       'your customers',9],           // 04 recuring node of 02 -> 2nd color
      ['bought first from Store2',    // 05 new node -> 4th color 
       'your customers',4],           // 06 recuring node of 02 -> 2nd color
      ['bought first from Store3',    // 07 new node -> 5th color
       'your customers',8],           // 08 recuring node of 02 -> 2nd color
      ['your customers',              // 09 recuring node of 02 -> 2nd color
       'BOUGHT ONLY FROM YOU',13],    // 10 new node -> 6th color
      ['your customers',              // 11 recuring node of 02 -> 2nd color
       'bought later from Store2',9], // 12 new node -> 7th color
      ['your customers',              // 13 recuring node of 02 -> 2nd color
       'bought later from Store4',7]  // 14 new node -> 8th color
    ]);

    var options = {
      sankey: {
        node: {
          // node colors will cycle thru array
          colors: [
            'magenta',
            'magenta',
            'cyan',
            'green',
            'yellow',
            'magenta',
            'green',
            'blue'
          ]
        },
        link: {
          colorMode: 'source'
        }

      }
    };

    var chart = new google.visualization.Sankey(document.getElementById('chart_div'));
    chart.draw(data, options);
  },
  packages: ['sankey']
});

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

Answer 1

给一个节点涂上不同于其他节点的颜色，

使用sankey.node.colors 配置选项

它需要一个颜色字符串数组，这些字符串将被映射到节点

请参阅以下工作片段...

google.charts.load('current', {
  callback: function () {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'From');
    data.addColumn('string', 'To');
    data.addColumn('number', 'Customers');
    data.addRows([
      ['BOUGHT FIRST FROM YOU','your customers',29],
      ['bought first from Store1','your customers',9],
      ['bought first from Store2','your customers',8],
      ['bought first from Store3','your customers',4],
      ['your customers','BOUGHT ONLY FROM YOU',27],
      ['your customers','bought later from Store2',9],
      ['your customers','bought later from Store4',7]
    ]);

    var options = {
      sankey: {
        node: {
          // node colors will cycle thru array
          colors: [
            'magenta',
            'cyan',
            'cyan',
            'cyan'
          ]
        }
      }
    };

    var chart = new google.visualization.Sankey(document.getElementById('chart_div'));
    chart.draw(data, options);
  },
  packages: ['sankey']
});

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