如何動態地在雙向電力創建打字稿表

Question

使用D3和打字稿是不是很難從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才能訪問bi bi。