Highcharts sankey圖，系列顏色

Question

如何使系列顏色與數據顏色相同？

在示例中，“不平衡”數據為紅色，但系列為藍色。

Highcharts.chart('container', {

    title: {
        text: 'Highcharts Sankey Diagram'
    },

    series: [{
            colors: ["#90CAF9", "#F44336", "#1565C0"],
        keys: ['from', 'to', 'weight'],
        data: [
            {name: "prop-1", color: "#90CAF9", from: "prop-1", to: "transition", weight: 0},
            {name: "prop-2", color: "#90CAF9", from: "prop-2", to: "transition", weight: 4.14},             
            {name: "imbalance", color: "#F44336", from: "imbalance", to: "transition", weight: 0.6},
            {name: "prop-3", color: "#1565C0", from: "transition", to: "prop-3", weight: 4.74},
            {name: "prop-4", color: "#1565C0", from: "transition", to: "prop-4", weight: 0},
        ],
        type: 'sankey',
        name: 'Sankey demo series'
    }]

});

示例： https ： //jsfiddle.net/s3xnm5v8/

更新被理解。 有必要使用節點。 https://jsfiddle.net/p4f21w7e/

Answer 1

要意識到的關鍵是有兩種方法可以為圖表着色：

• 系列顏色（系列[]。顏色）將為節點着色。
• 系列數據（系列[]。數據[]。顏色）為您的流量着色。

看看這個例子：

 series: [{
    colors: ["#880000",  "#AFAFAF",  "#008800", "#000088", "#ffb238", "#ffee37"],
    data: [

        {color: "#BB0000", from: "Red", to: "Colour Demo", weight: 10},
        {color: "#00BB00", from: "Green", to: "Colour Demo", weight: 4},                       {color: "#0000BB",  from: "Blue", to: "Colour Demo", weight: 6},
        {color: "#ffb238", from: "Colour Demo", to: "Orange", weight: 10},
        {color: "#ffee37",  from: "Colour Demo", to: "Yellow", weight: 10}
    ]
}]

https://jsfiddle.net/jjjjssssfidd/c2dbjshx/2/

節點使用系列顏色按照渲染順序（從左到右，向下移動）進行着色。 所以，在這個例子中：

• 首先是“紅色”（使用系列[]。顏色[0]）
• 然后“Color Demo”（使用系列[]。colors [1]）
• 回到綠色（系列[]。顏色[2]）
• 下至“藍色”（使用系列[]。顏色[3]）
• 然后到橙色（系列[]。顏色[4]）
• 最后黃色（系列[]。顏色[5]）

流本身根據該數據點的相關顏色着色，因此這是一個直接的關聯。

Answer 2

您可以使用sankey系列類型的'colors'屬性。

https://api.highcharts.com/highcharts/series.sankey.colors

series: [{
    keys: ['from', 'to', 'weight'],
    data: [
        {from:'Brazil', to:'Portugal', weight:5},
        ['Canada', 'Portugal', 1 ],
        ['Canada', 'France', 5 ],
        ['Canada', 'England', 1 ],
        ['Mexico', 'Portugal', 1 ],
        ['Mexico', 'France', 1 ],
        ['Mexico', 'Spain', 5 ],
        ['Mexico', 'England', 1 ],
        ['USA', 'Portugal', 1 ],
        ['USA', 'France', 1 ],
        ['USA', 'Spain', 1 ],
        ['USA', 'England', 5 ]
    ],
    type: 'sankey',
    name: 'Sankey demo series',
    colors: ['#00796B', '#ff0000', '#00ff00','#0000ff']
}]