Highcharts自定义可视化和数据绑定PowerBI

Question

Bharath R创建了一个很好的示例，介绍如何为PowerBI创建高级定制可视化。然而，尚未应用数据绑定。对于下面的highcharts线图，我想使用变量而不是硬编码的值。这样就可以应用数据绑定。

在这里，您可以找到包含highcharts自定义可视化和需要加载到自定义可视化中的数据的示例PowerBI文件。在此文件中，我制作了两个数据表。我没有偏好任何一个数据表。重要的是数据结构最容易加载到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);
    }
}

- Kees de Jager

---

有问题吗？如果是的话，我肯定错过了它。如果您对Highcharts库或图表有任何问题，请描述问题，以便我们可以提供帮助。 - Kacper Madej

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

你是否有可用的代码，可以将HighCharts添加到Power BI中？ - Mark

Answer 1

看一下你的链接和https://learn.microsoft.com/en-us/power-bi/developer/visuals/dataview-mappings之间的区别。似乎 microsoft.github.io/PowerBI-visuals/docs/concepts/… 已经过时，一些功能和语法已经改变。

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

当我按照这两个链接中指示的步骤（而不是过时的步骤）进行操作时，会发生什么情况呢？这里是动态加载的结果。请尝试按照本教程操作，如果您的问题仍然存在，请回来继续。

- Boom1207

---

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

你弄清楚如何在HighCharts可视化中使用真实数据了吗？ - Mark