Highcharts桑基图，系列颜色

Question

Highcharts桑基图，系列颜色

3

如何使系列颜色与数据颜色相同？

在此示例中，“不平衡”数据显示为红色，但是系列显示的颜色为蓝色。

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/

- al.koval

2个回答

1

您可以使用桑基图系列类型的“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']
}]

- Romesh Panditha

好的！谢谢 =) - al.koval

但它仍然表现得很奇怪。这里有一个例子https://jsfiddle.net/k62jpc1x/。为什么不平衡的图形不是红色的？ - al.koval

你需要从数据对象中删除'color'属性，然后重新排序颜色以获得正确的结果。https://jsfiddle.net/u08zg2nf/ - Romesh Panditha

同时，您的“节点”上的“colorIndex”也可以用于直接从我最初提到的颜色数组中引用颜色。 - Romesh Panditha

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- JamesG · Accepted Answer

需要明确的是，有两种方法可以为您的图表添加颜色：

系列颜色（series[].colors）将为节点着色。
系列数据（series[].data[].color）将为流程着色。

看一下这个例子：

 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/

节点的颜色按照它们被渲染的顺序（从左到右，向下）使用系列颜色进行着色。所以，在这个例子中：

首先是"红色"(使用series[].colors[0])
然后是"颜色演示"(使用series[].colors[1])
回到绿色(series[].colors[2])
移动到蓝色(使用series[].colors[3])
然后到橙色(series[].colors[4])
最后是黄色(series[].colors[5])

流本身按照其数据点的相关颜色进行着色，因此这是一个简单的关联。