Санки-диаграмма PowerBI Custom Visual с цветными узлами и упорядочением - PullRequest
Новая
       75

Санки-диаграмма PowerBI Custom Visual с цветными узлами и упорядочением

5 голосов
/ 05 января 2020

Диаграмма Санки в PowerBI имеет много возможностей, но, как вы можете прочитать на сайте github, есть некоторые важные ограничения. Во-первых, невозможно покрасить узлы. Кроме того, также невозможно изменить порядок узлов (как источника, так и пункта назначения).

В приложении приведен пример PowerBI файла , в котором отображается санки. В этом файле указано, какие цвета должны иметь узлы и каков порядок узлов.

Лучшим решением, конечно, является использование 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 Ответ

6 голосов
/ 10 января 2020

Похоже, что если вам нужно ввести какие-либо сторонние значения цвета (будь то шестнадцатеричный или какой-либо другой формат), вы можете использовать экземпляр 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);
...