將色彩新增至您的 Power BI 視覺效果Add colors to your Power BI visuals

此文章說明如何將色彩新增至您的視覺效果，以及如何處理色彩視覺效果的資料點。This article describes how to add colors to your visuals and how to handle data points for a color visual.

IVisualHost 將色彩公開為其服務之一。IVisualHost exposes color as one of its services. 此文章中的範例程式碼會修改 SampleBarChart 視覺效果 (英文)。The example code in this article modifies the SampleBarChart visual. 如需原始程式碼，請參閱 barChart.ts (英文)。For source code, see barChart.ts.

若要開始建立視覺效果，請參閱開發 Power BI 圓形卡片視覺效果。To get started creating visuals, see Developing a a Power BI circle card visual.

將色彩新增至資料點Add color to data points

不同的色彩代表每個資料點。A different color represents each data point. 將色彩新增至 BarChartDataPoint 介面，如下列範例所示：Add the color to the BarChartDataPoint interface, as in the following example:

/**
 * Interface for BarChart data points.
 *
 * @interface
 * @property {number} value    - Data value for point.
 * @property {string} category - Corresponding category of data value.
 * @property {string} color    - Color corresponding to data point.
 */
interface BarChartDataPoint {
    value: number;
    category: string;
    color: string;
};

使用調色盤服務Use the color palette service

colorPalette 服務會管理視覺效果中所使用的色彩。The colorPalette service manages the colors used in your visual. IVisualHost 上提供服務的執行個體。An instance of the service is available on IVisualHost.

在 update 方法中加以定義。Define it in the update method.

constructor(options: VisualConstructorOptions) {
        this.host = options.host; // host: IVisualHost
        ...
    }

public update(options: VisualUpdateOptions) {

    let colorPalette: IColorPalette = host.colorPalette;
    ...
}

將色彩指派給資料點Assigning color to data points

接下來，指定 dataPoints。Next, specify dataPoints. 在此範例中，每個 dataPoints 都包含值、類別與色彩。In this example, each of the dataPoints includes value, category, and color. dataPoints 也可以包含其他屬性。dataPoints can also include other properties.

在 SampleBarChart 中，visualTransform 方法會封裝 dataPoints 計算。In SampleBarChart, the visualTransform method encapsulates the dataPoints calculation. 該方法是 [橫條圖] 檢視模型的一部分。That method is a part of the Bar Chart viewmodel. 因為該方法會逐一查看 visualTransform 中的 dataPoints 計算，因此是指派色彩的理想位置，如下列程式碼所示：Because the method iterates through the dataPoints calculation in visualTransform, it's the ideal place to assign colors, as in the following code:


public update(options: VisualUpdateOptions) {
    ....
    let viewModel: BarChartViewModel = visualTransform(options, this.host);
    ....
}

function visualTransform(options: VisualUpdateOptions, host: IVisualHost): BarChartViewModel {
    let colorPalette: IColorPalette = host.colorPalette; // host: IVisualHost
    for (let i = 0, len = Math.max(category.values.length, dataValue.values.length); i < len; i++) {
        barChartDataPoints.push({
            category: category.values[i],
            value: dataValue.values[i],
            color: colorPalette.getColor(category.values[i]).value,
        });
    }
}

然後在 update 方法內的 d3 選取項目 barSelection 上套用來自 dataPoints 的資料：Then apply data from dataPoints on the d3-selection barSelection inside the update method:

// This code is actual for d3 v5
// in d3 v5 for this case we should use merge() after enter() and apply changes on barSelectionMerged
this.barSelection = this.barContainer
    .selectAll('.bar')
    .data(this.barDataPoints);

const barSelectionMerged = this.barSelection
    .enter()
    .append('rect')
    .merge(<any>this.barSelection);

barSelectionMerged.classed('bar', true);

barSelectionMerged
.attr("width", xScale.bandwidth())
.attr("height", d => height - yScale(<number>d.value))
.attr("y", d => yScale(<number>d.value))
.attr("x", d => xScale(d.category))
.style("fill", (dataPoint: BarChartDataPoint) => dataPoint.color)
.style("stroke", (dataPoint: BarChartDataPoint) => dataPoint.strokeColor)
.style("stroke-width", (dataPoint: BarChartDataPoint) => `${dataPoint.strokeWidth}px`);

this.barSelection
    .exit()
    .remove();

後續步驟Next steps

若要深入了解 Power BI 視覺效果，請參閱 Power BI 視覺效果的功能和屬性。To learn more about Power BI visuals, see Capabilities and properties of Power BI visuals.

若要深入了解如何開發 Power BI 視覺效果，請參閱如何針對 Power BI 視覺效果進行偵錯與疑難排解 Power BI 視覺效果。To learn more about developing Power BI visuals, see How to debug Power BI visuals and Troubleshoot Power BI visuals.