[英]Highcharts sankey diagram, series color
How to make the series color identical to the data color? 如何使系列颜色与数据颜色相同?
In the example, the "imbalance" data is red, but the series is colored blue. 在示例中,“不平衡”数据为红色,但系列为蓝色。
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'
}]
});
Example: https://jsfiddle.net/s3xnm5v8/ 示例: https : //jsfiddle.net/s3xnm5v8/
Update Understood. 更新被理解。 It is necessary to use Nodes. 有必要使用节点。 https://jsfiddle.net/p4f21w7e/ https://jsfiddle.net/p4f21w7e/
The key thing to realise is that there are two ways to colour your chart: 要意识到的关键是有两种方法可以为图表着色:
Take a look at this example: 看看这个例子:
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/ https://jsfiddle.net/jjjjssssfidd/c2dbjshx/2/
The nodes are coloured using the series colours in the order in which they are rendered (left to right, moving down). 节点使用系列颜色按照渲染顺序(从左到右,向下移动)进行着色。 So, in this example: 所以,在这个例子中:
The flow itself is coloured as per the associated color for that data point, so this is a straight forward association. 流本身根据该数据点的相关颜色着色,因此这是一个直接的关联。
You can use the 'colors' property of the sankey series type. 您可以使用sankey系列类型的'colors'属性。
https://api.highcharts.com/highcharts/series.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']
}]
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.