javascript - 带有颜色节点和排序的桑基图 PowerBI 自定义视觉对象

Question

PowerBI 的 sankey 图有很多可能性，但正如您可以在 github 网站上阅读的那样，存在一些重要的限制。首先是无法为节点着色。此外，也无法更改节点(源和目标)的顺序。

附上一个例子 PowerBI file其中显示了一个 sankey。在这个文件中指出了节点应该有哪些颜色以及节点的顺序应该是什么。

最好的解决方案当然是使用 PowerBI 来指示颜色，如本示例中的链接。但可能更容易在代码本身中用硬值指示节点(名称)的颜色，这也是一个不错的选择。同样适用于节点的排序

我查看了 d3 的 colorscale 函数将其链接到 fillcolor。但我收到一条错误消息，指出字符串值无法链接到色标。

可以在此处找到包含代码的 Github 页面:
https://github.com/microsoft/powerbi-visuals-sankey

我认为这行代码应该改变:

nodeFillColor = this.colorHelper.isHighContrast ? this.colorHelper.getThemeColor() : this.colorPalette.getColor(index.toString()).value;
console.log(nodeFillColor);
nodeStrokeColor = this.colorHelper.getHighContrastColor("foreground", nodeFillColor);

颜色现在基于主题颜色。希望可以将节点(名称)链接到颜色而不是主题。

希望您能帮助我和其他 Sankey 用户。

Answer 1

看起来如果您需要注入(inject)一些第 3 方颜色值(无论是十六进制还是其他格式)，您可以在突出显示为“作弊”的代码中使用 ColorHelper 实例。以下示例可在此处的 powerbi 文档中找到:https://github.com/microsoft/powerbi-visuals-utils-colorutils/blob/master/docs/api/colorUtils.md#calculatehighlightcolor

import ColorUtility = powerbi.extensibility.utils.color;

let yellow = "#FFFF00",
    yellowRGB = ColorUtility.parseColorString(yellow);

ColorUtility.calculateHighlightColor(yellowRGB, 0.8, 0.2);

// returns: '#CCCC00'

最终我认为这归结为一种辅助方法:

ColorUtility.parseColorString('<colorhex>')

我不知道将它插入你正在做的事情的最佳方法，但你可以尝试生成一个随机的十六进制颜色并将其插入以查看另一侧的结果。

// thanks Paul Irish: https://www.paulirish.com/2009/random-hex-color-code-snippets/
let randcolor = '#'+Math.floor(Math.random()*16777215).toString(16)
// Then to replace the example code you had in your question...
nodeFillColor = this.colorHelper.parseColorString(randcolor)
nodeStrokeColor = this.colorHelper.getHighContrastColor("foreground", nodeFillColor);