使用数据绑定 PowerBI 的 Highcharts 自定义视觉效果

Posted 2023-02-22

【中文标题】使用数据绑定 PowerBI 的 Highcharts 自定义视觉效果

【英文标题】：Highcharts custom visuals with Data binding PowerBI

【发布时间】：2020-05-04 08:02:53

【问题描述】：

Bharath R 创建了一个很好的example，介绍了如何为 PowerBI 创建一个 highcharts 自定义视觉对象。但是，尚未应用数据绑定。对于下面的 highcharts 折线图，我想使用变量而不是硬编码值。这样就可以应用数据绑定。

在这里您可以找到example PowerBI 文件，其中包含 highcharts 自定义视觉对象和需要加载到自定义视觉对象中的数据。在这个文件中，我制作了两个数据表。我对两个数据表之一没有偏好。重要的是，数据的结构使其最容易在 highcharts 视觉中加载。

示例代码 (visual.ts)

"use strict";

import "core-js/stable";
import "./../style/visual.less";
import powerbi from "powerbi-visuals-api";
import VisualConstructorOptions = powerbi.extensibility.visual.VisualConstructorOptions;
import VisualUpdateOptions = powerbi.extensibility.visual.VisualUpdateOptions;
import IVisual = powerbi.extensibility.visual.IVisual;
import EnumerateVisualObjectInstancesOptions = powerbi.EnumerateVisualObjectInstancesOptions;
import VisualObjectInstance = powerbi.VisualObjectInstance;
import DataView = powerbi.DataView;
import VisualObjectInstanceEnumerationObject = powerbi.VisualObjectInstanceEnumerationObject;

import * as Highcharts from 'highcharts';
import * as Exporting from 'highcharts/modules/exporting';

import  VisualSettings  from "./settings";
export class Visual implements IVisual 
private target: htmlElement;
private settings: VisualSettings;

    constructor(options: VisualConstructorOptions) 
        console.log('Visual constructor', options);
        this.target = options.element;
    

    public update(options: VisualUpdateOptions) 
        this.settings = Visual.parseSettings(options && options.dataViews && options.dataViews[0]);
        console.log('Visual update', options);
        var optionMain=this.target;

        /**
         * Code to add highcharts
         */

        Highcharts.chart(optionMain.id, 

            title: 
                text: 'Solar Employment Growth by Sector, 2010-2016'
            ,

            subtitle: 
                text: 'Source: thesolarfoundation.com'
            ,

            xAxis: 
                categories: ['2010', '2011', '2012', '2013', '2014', '2015', '2016', '2017']
            ,

            yAxis: 
                title: 
                    text: 'Number of Employees'
                
            ,
            legend: 
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'middle'
            ,

            plotOptions: 
                series: 
                    label: 
                        connectorAllowed: false
                    
                
            ,

            series: [
                name: 'Installation',
                data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
                type: undefined
            , 
                name: 'Manufacturing',
                data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434],
                type: undefined
            , 
                name: 'Sales & Distribution',
                data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387],
                type: undefined
            , 
                name: 'Project Development',
                data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227],
                type: undefined
            , 
                name: 'Other',
                data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111],
                type: undefined
            ],

            responsive: 
                rules: [
                    condition: 
                        maxWidth: 500
                    ,
                    chartOptions: 
                        legend: 
                            layout: 'horizontal',
                            align: 'center',
                            verticalAlign: 'bottom'
                        
                    
                ]
            

        );



    

    private static parseSettings(dataView: DataView): VisualSettings 
        return VisualSettings.parse(dataView) as VisualSettings;
    

    /**
     * This function gets called for each of the objects defined in the capabilities files and allows you to select which of the
     * objects and properties you want to expose to the users in the property pane.
     *
     */
    public enumerateObjectInstances(options: EnumerateVisualObjectInstancesOptions): VisualObjectInstance[] | VisualObjectInstanceEnumerationObject 
        return VisualSettings.enumerateObjectInstances(this.settings || VisualSettings.getDefault(), options);
    

【问题讨论】：

有什么问题吗？如果是，那我肯定错过了。如果您对 Highcharts 库或图表有疑问，请描述它们，以便我们提供帮助。

嗨 Kacper，问题是将数据（json 格式）动态加载到自定义 highcharts 视觉对象中。这可以通过应用所谓的数据绑定来完成。此处对此进行了解释：microsoft.github.io/PowerBI-visuals/docs/concepts/… 但是，我不知道如何使其正常工作，因此我想问是否有人可以帮助我。希望这个问题现在对你来说更清楚了。

您是否有将 HighCharts 添加到 Power BI 的工作代码？

【参考方案1】：

查看您的链接和https://docs.microsoft.com/en-us/power-bi/developer/visuals/dataview-mappings 之间的区别。似乎 microsoft.github.io/PowerBI-visuals/docs/concepts/... 已弃用，并且某些功能和合成器已更改。

在您的示例中，我没有在 dataViewMappings 中看到您的定义。

当我完全按照两个链接中指示的步骤（不是已弃用的）和这里的结果，动态加载时会发生什么。如果您的问题仍然存在，请尝试按照本教程进行操作。

【讨论】：

嗨 Boom1207，我已经尝试了上面的链接。但是在本文档的帮助下，我仍然无法应用数据绑定。这就是为什么我要问是否有人可以发送一个示例代码，其中应用了 highcharts 的数据绑定。仍然感谢您的帮助！

您知道如何将真实数据与 HighCharts 视觉效果结合使用吗？