Highcharts sankey图,系列颜色

时间:2018-12-11 04:32:43

标签: javascript highcharts sankey-diagram

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

在该示例中,“不平衡”数据为红色,而系列为蓝色。

Representation of a combination of 2 words, first and second

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

enter image description here

更新 明白了有必要使用节点。 https://jsfiddle.net/p4f21w7e/

2 个答案:

答案 0 :(得分:2)

要意识到的关键是,有两种方法可以为图表着色:

  • 系列颜色(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])
  • 回到绿色(系列[] .colors [2])
  • 向下到“蓝色”(使用series []。colors [3])
  • 然后转到橙色(series []。colors [4])
  • 最终为黄色(系列[] .colors [5])

流本身按照该数据点的关联颜色进行着色,因此这是直接关联。

答案 1 :(得分:1)

您可以使用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']
}]

enter image description here