gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 14:54:33 31 4
gpt4 key购买 nike

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

在这里您可以找到 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);
}
}

最佳答案

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

在您的示例中,我在 中没有看到您的定义。数据 View 映射 .



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

关于使用数据绑定(bind) PowerBI 的 Highcharts 自定义视觉效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59787248/

31 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com