Question

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

我创建的示例 -

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

打字稿

// 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内加载的默认视觉效果。只需按“编译并运行”即可在加载时查看。它在Power BI中的数据集上实现了一个表，您将看到代码结构和所需的内容。您需要注册Power BI才能访问power bi。

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

1 个答案: