AmCharts - проблема с изменением цвета узла на основе набора данных

Question

Поигрался с amCharts, хотя на самом деле не использовал javascript раньше - изучал документацию последние несколько часов - я надеюсь, что кто-нибудь скажет мне, как я могу изменить цвет узла (или фрагмента) на основе цвет, указанный в наборе данных.

 { from: "Recycling/Reuse", to: "Counter Communities (MID)", value: 1 },  

приведенный выше код показывает данные в одном узле, который поставляется с примером диаграммы. Можно ли добавить дополнительное поле данных в поле для цвета? что-то вроде этого ...

 { from: "Recycling/Reuse", to: "Drop City (HIGH)", value: 1 , fill: am4core.color("#f7c200")}, 

Я прикреплю полный сценарий в фрагменте кода ниже.

Я попытался добавить следующие строки кода (их также можно найти в конец полного скрипта):

chart.propertyFields.fill = "fill";
chart.dataFields.fill = "fill";
nodeTemplate.propertyFields.fill = "fill";
linkTemplate.fill = "{fill}";
slice.fill = "{fill}"; 

Полный скрипт здесь (Кажется, что фрагмент здесь не работает должным образом, но один вставлен как html код на моем сайте Wix, я получаю более точный результат (без правильных цветов)):

<!-- Styles -->
<style>
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
#chartdiv {
  width: 100%;
  height: 100%;
  padding:100px,100px,100px,100px;border:0px solid black;
  font-size:0.8em;
  background-color: transparent;
}
</style>

<!-- Resources -->
<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/dataviz.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/spiritedaway.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>

<!-- Chart code -->
<script>
am4core.ready(function() {

// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end

var chart = am4core.create("chartdiv", am4charts.ChordDiagram);
chart.hiddenState.properties.opacity = 1;
chart.innerRadius = am4core.percent(90)
chart.padding(100,100,100,100);

chart.data = [


    { from: "[bold font-size: 1.2em ]Media - Film[/]", to: "Fluxus Foundation [bold](HIGH)[/]", value: 1 },
    { from: "[bold font-size: 1.2em]Media - Film[/]", to: "Drop City [bold](HIGH)[/]", value: 1 },
    { from: "[bold font-size: 1.2em]Media - Film[/]", to: "Ant Farm [bold](LOW)[/]", value: 1 },

    { from: "[bold font-size: 1.2em]Media - Exhibition[/]", to: "Fluxus Foundation [bold](HIGH)[/]", value: 1 },
    { from: "[bold font-size: 1.2em]Media - Exhibition[/]", to: "An Architektur", value: 1 },
    { from: "[bold font-size: 1.2em]Media - Exhibition[/]", to: "ASSEMBLE [bold](MID)[/]", value: 1 },  
    { from: "[bold font-size: 1.2em]Media - Exhibition[/]", to: "Drop City [bold](HIGH)[/]", value: 1 },
    { from: "[bold font-size: 1.2em]Media - Exhibition[/]", to: "Gehry/Eisenman/\nHoberma/Yoh [bold](HIGH)[/]", value: 1 },
    { from: "[bold font-size: 1.2em]Media - Exhibition[/]", to: "Ant Farm [bold](LOW)[/]", value: 1 },
    { from: "[bold font-size: 1.2em]Media - Exhibition[/]", to: "Achigram [bold](LOW)[/]", value: 1 },

    { from: "[bold font-size: 1.2em]Media - Publications[/]", to: "Architexx [bold](MID)[/]", value: 1 },
    { from: "[bold font-size: 1.2em]Media - Publications[/]", to: "Buckminster Fuller [bold](HIGH)[/]", value: 1 },
    { from: "[bold font-size: 1.2em]Media - Publications[/]", to: "Rem Koolhaas", value: 1 },
    { from: "[bold font-size: 1.2em]Media - Publications[/]", to: "The S.I.", value: 1 },
    { from: "[bold font-size: 1.2em]Media - Publications[/]", to: "Rem Koolhaas", value: 1 },
    { from: "[bold font-size: 1.2em]Media - Publications[/]", to: "Whole Earth Catalog.", value: 1 },
    { from: "[bold font-size: 1.2em]Media - Publications[/]", to: "An Architektur", value: 1 },
    { from: "[bold font-size: 1.2em]Media - Publications[/]", to: "BAVO [bold](LOW)[/]", value: 1 },
    { from: "[bold font-size: 1.2em]Media - Publications[/]", to: "Atelier BOW-WOW [bold](MID)[/]", value: 1 },
    { from: "[bold font-size: 1.2em]Media - Publications[/]", to: "Ant Farm [bold](LOW)[/]", value: 1 },

    { from: "[bold font-size: 1.2em]Media - Digital[/]", to: "Architexx [bold](MID)[/]", value: 1 },
    { from: "[bold font-size: 1.2em]Media - Digital[/]", to: "Fluxus Foundation [bold](HIGH)[/]", value: 1 },
    { from: "[bold font-size: 1.2em]Media - Digital[/]", to: "An Architektur", value: 1 },
    { from: "[bold font-size: 1.2em]Media - Digital[/]", to: "C.A.T. [bold](HIGH)[/]", value: 1 },
    { from: "[bold font-size: 1.2em]Media - Digital[/]", to: "Artchitype [bold](MID)[/]", value: 1 },

    { from: "[bold font-size: 1.2em]Digital Design[/]", to: "00/: [bold](MID)[/]", value: 1 },
    { from: "[bold font-size: 1.2em]Digital Design[/]", to: "Arup Associates [bold](HIGH)[/]", value: 1 },
    { from: "[bold font-size: 1.2em]Digital Design[/]", to: "ASSEMBLE [bold](MID)[/]", value: 1 },
    { from: "[bold font-size: 1.2em]Digital Design[/]", to: "Rem Koolhaas", value: 1 },
    { from: "[bold font-size: 1.2em]Digital Design[/]", to: "Wiki House", value: 1 },
    { from: "[bold font-size: 1.2em]Digital Design[/]", to: "Gehry/Eisenman/\nHoberma/Yoh [bold](HIGH)[/]", value: 1 },
    { from: "[bold font-size: 1.2em]Digital Design[/]", to: "Superuse", value: 1 },
    { from: "[bold font-size: 1.2em]Digital Design[/]", to: "Public Works Groups", value: 1 },
    { from: "[bold font-size: 1.2em]Digital Design[/]", to: "Frei Otto [bold](HIGH)[/]", value: 1 },
    { from: "[bold font-size: 1.2em]Digital Design[/]", to: "DigitalFUTURES WORLD [bold](HIGH)[/]", value: 1 },
    { from: "[bold font-size: 1.2em]Digital Design[/]", to: "Harold Hay", value: 1 },
    { from: "[bold font-size: 1.2em]Digital Design[/]", to: "Artchitype [bold](MID)[/]", value: 1 },

    { from: "[bold font-size: 1.2em]Online/Cloud Services[/]", to: "00/:", value: 1 },
    { from: "[bold font-size: 1.2em]Online/Cloud Services[/]", to: "Open Desk", value: 1 },
    { from: "[bold font-size: 1.2em]Online/Cloud Services[/]", to: "OSArch [bold](HIGH)[/]", value: 1 },
    { from: "[bold font-size: 1.2em]Online/Cloud Services[/]", to: "better blocks [bold](MID)[/]", value: 1 },
    { from: "[bold font-size: 1.2em]Online/Cloud Services[/]", to: "C.A.T. [bold](HIGH)[/]", value: 1 },

    { from: "[bold font-size: 1.2em]Modular Design[/]", to: "00/: [bold](MID)[/]", value: 1 },
    { from: "[bold font-size: 1.2em]Modular Design[/]", to: "ASSEMBLE [bold](MID)[/]", value: 1 },
    { from: "[bold font-size: 1.2em]Modular Design[/]", to: "Wiki House", value: 1 },
    { from: "[bold font-size: 1.2em]Modular Design[/]", to: "MassBespoke", value: 1 },
    { from: "[bold font-size: 1.2em]Modular Design[/]", to: "Public Works Groups", value: 1 },
    { from: "[bold font-size: 1.2em]Modular Design[/]", to: "Fluxus Foundation [bold](HIGH)[/]", value: 1 },
    { from: "[bold font-size: 1.2em]Modular Design[/]", to: "better blocks [bold](MID)[/]", value: 1 },

    { from: "[bold font-size: 1.2em]Automated Manufacturing[/]", to: "00/: [bold](MID)[/]", value: 1 },
    { from: "[bold font-size: 1.2em]Automated Manufacturing[/]", to: "Arup Associates [bold](HIGH)[/]", value: 1 },
    { from: "[bold font-size: 1.2em]Automated Manufacturing[/]", to: "Open Desk", value: 1 },
    { from: "[bold font-size: 1.2em]Automated Manufacturing[/]", to: "ASSEMBLE [bold](MID)[/]", value: 1 },
    { from: "[bold font-size: 1.2em]Automated Manufacturing[/]", to: "WikiHouse", value: 1 },
    { from: "[bold font-size: 1.2em]Automated Manufacturing[/]", to: "MassBespoke", value: 1 },
    { from: "[bold font-size: 1.2em]Automated Manufacturing[/]", to: "OSArch [bold](HIGH)[/]", value: 1 },
    { from: "[bold font-size: 1.2em]Automated Manufacturing[/]", to: "Superuse", value: 1 },
    { from: "[bold font-size: 1.2em]Automated Manufacturing[/]", to: "better blocks [bold](MID)[/]", value: 1 },

    { from: "[bold font-size: 1.2em]Algorithms/AI[/]", to: "Arup Associates [bold](HIGH)[/]", value: 1 },
    { from: "[bold font-size: 1.2em]Algorithms/AI[/]", to: "OSArch [bold](HIGH)[/]", value: 1 },
    { from: "[bold font-size: 1.2em]Algorithms/AI[/]", to: "Gehry/Eisenman/\nHoberma/Yoh [bold](HIGH)[/]", value: 1 },  
    { from: "[bold font-size: 1.2em]Algorithms/AI[/]", to: "Superuse", value: 1 },  
    { from: "[bold font-size: 1.2em]Algorithms/AI[/]", to: "Frei Otto [bold](HIGH)[/]", value: 1 },  
    { from: "[bold font-size: 1.2em]Algorithms/AI[/]", to: "DigitalFUTURES WORLD [bold](HIGH)[/]", value: 1 },  

    { from: "[bold font-size: 1.2em]Recycling/Reuse[/]", to: "Superuse", value: 1 },     
    { from: "[bold font-size: 1.2em]Recycling/Reuse[/]", to: "2012 Architecten", value: 1 },      
    { from: "[bold font-size: 1.2em]Recycling/Reuse[/]", to: "Atelier BOW-WOW [bold](MID)[/]", value: 1 },
    { from: "[bold font-size: 1.2em]Recycling/Reuse[/]", to: "Counter Communities [bold](MID)[/]", value: 1 }, 
    { from: "[bold font-size: 1.2em]Recycling/Reuse[/]", to: "Drop City [bold](HIGH)[/]", value: 1 , fill: am4core.color("#f7c200")},
 
];

chart.dataFields.fromName = "from";
chart.dataFields.toName = "to";
chart.dataFields.value = "value";
chart.propertyFields.fill = "fill";
chart.dataFields.fill = "fill";

chart.nodePadding = 0.5;
chart.minNodeSize = 0.01;
chart.startAngle = 80;
chart.endAngle = chart.startAngle + 360;
chart.sortBy = "value";

// make nodes draggable
var nodeTemplate = chart.nodes.template;
nodeTemplate.readerTitle = "Click to show/hide or drag to rearrange";
nodeTemplate.showSystemTooltip = true;
nodeTemplate.cursorOverStyle = am4core.MouseCursorStyle.pointer;
nodeTemplate.propertyFields.fill = "fill";

// PASTED INFO PLAYING WITH APPEARANCE - **START**



// when rolled over the node, make all the links rolled-over
nodeTemplate.events.on("over", function (event) {    
    var node = event.target;
    node.outgoingDataItems.each(function (dataItem) {
        if(dataItem.toNode){
            dataItem.link.isHover = true;
            dataItem.toNode.label.isHover = true;
        }
    })
    node.incomingDataItems.each(function (dataItem) {
        if(dataItem.fromNode){
            dataItem.link.isHover = true;
            dataItem.fromNode.label.isHover = true;
        }
    }) 

    node.label.isHover = true;   
})

// when rolled out from the node, make all the links rolled-out
nodeTemplate.events.on("out", function (event) {
    var node = event.target;
    node.outgoingDataItems.each(function (dataItem) {        
        if(dataItem.toNode){
            dataItem.link.isHover = false;                
            dataItem.toNode.label.isHover = false;
        }
    })
    node.incomingDataItems.each(function (dataItem) {
        if(dataItem.fromNode){
            dataItem.link.isHover = false;
           dataItem.fromNode.label.isHover = false;
        }
    })

    node.label.isHover = false;
})



// link template
var linkTemplate = chart.links.template;
linkTemplate.strokeOpacity = 0;
linkTemplate.fillOpacity = 0.3;
linkTemplate.tooltipText = "{toName} uses {fromName}";
linkTemplate.fill = "{fill}";

var hoverState = linkTemplate.states.create("hover");
hoverState.properties.fillOpacity = 0.95;
hoverState.properties.strokeOpacity = 0.7;

var slice = chart.nodes.template.slice;
slice.stroke = am4core.color("#000");
slice.strokeOpacity = .5;
slice.strokeWidth = 0;
slice.cornerRadius = 4;
slice.innerCornerRadius = 4;
slice.fill = "{fill}";

var label = nodeTemplate.label;
label.relativeRotation = 90;

label.fillOpacity = 0.5;
var labelHS = label.states.create("hover");
labelHS.properties.fillOpacity = 1;

}); // end am4core.ready()
</script>

<!-- HTML -->
<div id="chartdiv"></div>

Ура