使用HTML/angular2模板引擎的angular2中的動態數據可視化

在前端處理數據時，經常會面臨用戶可理解的數據可視化的挑戰。可視化的（動態）數據結構良好且簡單（重點在於數據大小和防止超載）。使用HTML/angular2模板引擎的angular2中的動態數據可視化

但是，下面的數據結構（DATA）當然不是用戶的最佳視覺表示。

讓我解釋以及尚未使用下面的例子中，我解決不了的問題：

讓我從模板引擎的角度指出，在這裏，我來像EJS等，這可能是主要的之所以我沒有找到一個簡單的方法來解決 - 不知道...

舉例：矩陣表（如時隙在一年內通過每週一次的分辨率）

大TA（DATA）：

[ 
    { 
     name:'Slot 1', 
     slot:{ 
       start:3, 
       end:5 
      } 
    }, 
    { 
     name:'Slot 2', 
     slot:{ 
       start:32, 
       end:50 
      } 
    }, 
    { 
     name:'Slot 3', 
     slot:{ 
       start:10, 
       end:26 
      } 
    } 
]

可視化：

的數據應該被渲染成矩陣table具有三個rows（儘可能多的行作爲數據項）並與52的分辨率周（cells）每row。範圍（start-end）應該在該表中突出顯示。

正如上面我所提到的來與其他模板引擎的角度來看，所以我試圖找出如何在角度寫loops左右，獲得這個可視化。在其他模板引擎中，我會'解釋'模板中的數據，並在兩個loops中創建HTML，因爲此「超載」僅與視覺目的相關。

動態生成的標記（EJS） - 路

<table> 

<% var i, weeks=52; 
    for(i=0;i<DATA.length;i+=1){ 
%> 

<tr> 
    <td><%-DATA[i].name%></td> 

    <% var j; 
     for(j=1;j<=weeks;j+=1){ 
    %> 

    <td class="<%((j>=DATA[i].slot.start && j<= DATA[i].slot.end)?'in-range':'')%>"> 
     <%- j %> 
    <td> 


    <%}%> 

</tr> 

<%}> 

</table>

Qustion：

其實我不能夠以高效的方式在Angular 2.x解決這個唯一的解決辦法，我可以實現（當然不好）是爲整個table矩陣編寫整個HTML。

無論何時需要更改HTML（例如添加一個class左右），這都會產生巨大的開銷。我知道搜索&替換標記;）但它仍然是很多標記來維護可能會產生，我認爲在Angular2中必須有一種方法來做到這一點。

感謝任何幫助指引我進入更好的方向。

來源

2016-12-15 Bernhard

您可以得到所需的佈局與此代碼：

<table> 
    <tr *ngFor="let row of DATA"> 
     <td>{{ row.name }}</td> 
     <td *ngFor="let week of weeks" 
      [class.in-range]="row.slot.start <= week && week <= row.slot.end"> 
     {{ week }} 
     </td> 
    </tr> 
    </table>

其中weeks = [1, 2, 3, ..., 52]或與該輔助函數：

export function range(count: number, from = 0) { 
    return Array.from(Array(count)).map((_, i) => i + from); 
}

<td *ngFor="let week of range(52)">

來源

2016-12-15 21:40:19 Sasxa

非常感謝你。我以前也有過使用這個「虛擬」陣列的想法，但認爲它不可能成爲現實。現在我看到了輔助函數，我認爲這是一種可以實現的方式（即使矩陣變得更加複雜）。讓我問一下將輔助函數放在'angular-cli'應用程序中的位置？ – Bernhard

我將它們保存在共享文件夾中（'的src /應用程序/共享/ shared.utils.ts'） – Sasxa

使用HTML/angular2模板引擎的angular2中的動態數據可視化

回答

相關問題