Sankey-diagram PowerBI自定义视觉,带有颜色节点和顺序

时间:2020-01-05 18:04:11

标签: javascript d3.js powerbi sankey-diagram powerbi-custom-visuals

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

随附的是示例PowerBI file,其中显示了一个Sankey。在该文件中指出了节点应具有的颜色以及节点的顺序。

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

我查看了d3的色阶功能,以将其链接到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的其他用户提供帮助。

1 个答案:

答案 0 :(得分:6)

如果您需要注入一些第三者的颜色值(十六进制或其他格式),则可以在突出显示为“作弊”的代码中使用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);