gpt4 book ai didi

javascript - Highcharts 桑基图,系列颜色

转载 作者:行者123 更新时间:2023-11-30 08:20:57 28 4
gpt4 key购买 nike

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

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

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/

enter image description here

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

最佳答案

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

  • 系列颜色 (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])

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

关于javascript - Highcharts 桑基图,系列颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53717420/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com