Как установить цвет конкретной заметки и/или ссылки на диаграмме sankey диаграммы google?

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. Все примечания, относящиеся к одному магазину, должны иметь один и тот же цвет.

Для этого необходимо установить цвет заметок и ссылок независимо. Возможно ли это, и если да, то как?

---

EDIT 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 конфигурации

он принимает массив цветных строк, которые будут отображаться на n оды

см ниже рабочего сниппета ...

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>