Power BI Custom Visual: изменение цвета при изменении среза даты
Я создал пользовательский визуал в Power BI, который позволял вставлять диаграммы разных типов в один график. Но когда я вставляю график на приборную панель, у меня возникают проблемы с срезами даты. Я определяю цвет для данных и сохраняю его с помощью:
let view = dataView[0].categorical;
let categories = view.categories[0];
let objects = categories.objects;
let value = view.values;
for (let i = 0, len = Math.max(value.length); i < len; i++) {
viewModel.dataPoints.push({
category: < string > value[i].source.displayName,
colour: objects && objects[i] && DataViewObjects.getFillColor(objects[i], {
objectName: "colorSelector",
propertyName: "fill"
}, null),
selectionId: this.host.createSelectionIdBuilder()
.withCategory(categories, i)
.createSelectionId(),
});
}Но когда я изменяю срезы даты, объекты становятся нулевыми или неопределенными, а цвет сбрасывается на значение по умолчанию.
Существует решение всегда сохранять цвет в объекте при изменении слайсера.
Спасибо за вашу помощь.
1 ответ
Enumerate ObjectInstances метод:
public enumerateObjectInstances(options: EnumerateVisualObjectInstancesOptions): VisualObjectInstanceEnumeration {
let objectName = options.objectName;
let objectEnumeration: VisualObjectInstance[] = [];
let index = 0;
switch (objectName) {
case 'xAxis':
objectEnumeration.push({
objectName: objectName,
properties: this.settings.xAxis,
selector: null
});
break;
case 'y1Axis':
objectEnumeration.push({
objectName: objectName,
properties: this.settings.y1Axis,
selector: null
});
break;
case 'y2Axis':
objectEnumeration.push({
objectName: objectName,
properties: this.settings.y2Axis,
selector: null
});
break;
case 'margin':
objectEnumeration.push({
objectName: objectName,
properties: this.settings.margin,
selector: null
});
break;
case 'legend':
objectEnumeration.push({
objectName: objectName,
properties: this.settings.legend,
selector: null
});
break;
case 'colorSelector':
if (this.viewModel) {
for (let dp of this.viewModel.dataPoints) {
objectEnumeration.push({
objectName: objectName,
displayName: dp.category,
properties: {
fill: {
solid: {
color: dp.colour || this.settings.colorSelector[Object.keys(this.settings.colorSelector)[index]]
}
}
},
selector: dp.selectionId.getSelector()
});
}
}
break;
case 'datashape':
if (this.viewModel) {
for (let dp of this.viewModel.dataPoints) {
objectEnumeration.push({
objectName: objectName,
displayName: dp.category,
properties: {
shape: dp.symbol || this.settings.datashape[Object.keys(this.settings.datashape)[index]]
},
selector: dp.selectionId.getSelector()
});
}
}
break;
case 'datatrace':
if (this.viewModel) {
for (let dp of this.viewModel.dataPoints) {
objectEnumeration.push({
objectName: objectName,
displayName: dp.category,
properties: {
charttype: dp.trace || this.settings.datatrace[Object.keys(this.settings.datatrace)[index]]
},
selector: dp.selectionId.getSelector()
});
}
}
break;
};
return objectEnumeration;
}Capabilities.json:
{
"dataRoles": [
{
"displayName": "X-Axis",
"name": "x",
"kind": "Grouping"
},
{
"displayName": "Y-Axis 1",
"name": "y1",
"kind": "Measure"
},
{
"displayName": "Y-Axis 2",
"name": "y2",
"kind": "Measure"
},
{
"displayName": "Split by",
"name": "splitby1",
"kind": "Grouping"
}
],
"dataViewMappings": [
{
"conditions": [
{
"x": {
"max": 1
},
"legend": {
"max": 1
},
"splitby1": {
"max": 1
}
}
],
"categorical": {
"categories": {
"for": {
"in": "x"
}
},
"values": {
"group": {
"by": "splitby1",
"select": [
{
"for": {
"in": "y1"
}
},
{
"for": {
"in": "y2"
}
}
]
}
}
}
}
],
"suppressDefaultTitle": true,
"objects": {
"xAxis": {
"displayName": "X-Axis",
"properties": {
"title": {
"displayName": "Title",
"type": {
"text": true
}
},
"margin": {
"displayName": "Margin",
"type": {
"text": true
}
}
}
},
"y1Axis": {
"displayName": "Y1-Axis",
"properties": {
"title": {
"displayName": "Title",
"type": {
"text": true
}
},
"margin": {
"displayName": "Margin",
"type": {
"text": true
}
}
}
},
"y2Axis": {
"displayName": "Y2-Axis",
"properties": {
"title": {
"displayName": "Title",
"type": {
"text": true
}
},
"margin": {
"displayName": "Margin",
"type": {
"text": true
}
}
}
},
"datatrace": {
"displayName": "Trace Type",
"properties": {
"charttype": {
"displayName": "Trace",
"type": {
"enumeration": [
{
"displayName": "Line Chart",
"value": "line"
},
{
"displayName": "Line Marker Chart",
"value": "lineMarker"
}
]
}
}
}
},
"margin": {
"displayName": "Margins",
"properties": {
"l": {
"displayName": "Left",
"type": {
"numeric": true
}
},
"r": {
"displayName": "Right",
"type": {
"numeric": true
}
},
"t": {
"displayName": "Top",
"type": {
"numeric": true
}
},
"b": {
"displayName": "Bottom",
"type": {
"numeric": true
}
}
}
},
"legend": {
"displayName": "Legend",
"properties": {
"enabled": {
"displayName": "Enabled",
"type": {
"bool": true
}
},
"orientation": {
"displayName": "Orientation",
"type": {
"enumeration": [
{
"displayName": "Vertical",
"value": "v"
},
{
"displayName": "Horizontal",
"value": "h"
}
]
}
}
}
},
"colorSelector": {
"displayName": "Data Colors",
"properties": {
"fill": {
"displayName": "Color",
"type": {
"fill": {
"solid": {
"color": true
}
}
}
}
}
},
"datashape": {
"displayName": "Shape Type",
"properties": {
"shape": {
"displayName": "Shape",
"type": {
"enumeration": [
{
"displayName": "Default",
"value": "none"
},
{
"displayName": "Circle",
"value": "circle"
}
]
}
}
}
}
}
}