如何在 POWER BI 中动态创建 TypeScript table

Question

使用 d3 和 typeScript 并不难 html ...

我创建的示例 --

<table id="view">
  <thead>
  </thead>
  <tbody>
  </tbody>
</table>

TypeScript

// the table rows, typically loaded from data file using d3.csv
    var hours = [
        { title: "Fredrik", one: 8, two: 5, three: 6, four: 9, five: 5, six: 8, seven: 8, eight: 0, nine: 8, ten: 12 },
        { title: "Yoakim", one: 4, two: 6, three: 8, four: 3, five: 8, six: 4, seven: 2, eight: 1, nine: 7, ten: 10  },
        { title: "Lars", one: 8, two: 12, three: 6, four: 8, five: 5, six: 8, seven: 8, eight: 10, nine: 8, ten: 13  },
    ];

    // column definitions
    var columns = [
        { head: 'UserName', cl: 'title', html: ƒ('title') },
        { head: 'one', cl: 'center', html: ƒ('one') },
        { head: 'two', cl: 'center', html: ƒ('two', two()) },
        { head: 'three', cl: 'num', html: ƒ('three', d3.format('$,')) },
        { head: 'four', cl: 'num', html: ƒ('four', d3.format('.1f')) },
        { head: 'five', cl: 'num', html: ƒ('five', d3.format('$,')) },
        { head: 'six', cl: 'num', html: ƒ('six', d3.format('.1f')) },
        { head: 'seven', cl: 'num', html: ƒ('seven', d3.format('$,')) },
        { head: 'eight', cl: 'num', html: ƒ('eight', d3.format('.1f')) },
        { head: 'nine', cl: 'num', html: ƒ('nine', d3.format('$,')) },
        { head: 'ten', cl: 'num', html: ƒ('ten', d3.format('.1f')) }
    ];

    // create table
    var table = d3.select('body')
        .append('table');

    // create table header
    table.append('thead').append('tr')
        .selectAll('th')
        .data(columns).enter()
        .append('th')
        .attr('class', ƒ('cl'))
        .text(ƒ('head'));

    // create table body
    table.append('tbody')
        .selectAll('tr')
        .data(hours).enter()
        .append('tr')
        .selectAll('td')
        .data(function(row, i) {
            return columns.map(function(c) {
                // compute cell values for this specific row
                var cell = {};
                d3.keys(c).forEach(function(k) {
                    cell[k] = typeof c[k] == 'function' ? c[k](row,i) : c[k];
                });
                return cell;
            });
        }).enter()
        .append('td')
        .html(ƒ('html'))
        .attr('class', ƒ('cl'));

    function two() {
        var fmt = d3.format('02d');
        return function(l) { return Math.floor(l / 60) + ':' + fmt(l % 60) + ''; };
    }

CSS

    <style type="text/css">
    view, td, th {
  height:50;
}

th {
 background-color:black;
  color:white  
}

td {
  border: 1px solid black;
  background-color:#ccc;
  width:200px;
  text-align: center;

}
    </style>

这是 jsFiddle：https://jsfiddle.net/christoferhansen/dpuk9n55/1/

现在我的问题是如何在 Power BI 环境中使用相同的结构并获得类似的结果！

任何人都知道这个问题的任何答案！

Answer 1

建议您查看 Power BI dev tools. Just press "Compile and run" to see it when it loads. It implements a table over a data set in Power BI and you'll see the code structure and what's required. You'll need to register for Power BI 中加载的默认视觉对象以访问 power bi。

如何在 POWER BI 中动态创建 TypeScript table

How to dynamically create a TypeScript table in POWER BI

typescript

powerbi