我发现很难选择一个方向,编写自己的代码来生成它(使用jQuery)或使用像Pivottable这样的库.我尝试过后者,但是找不到正确的方向w.r.t.自定义聚合函数.
我可以看到自己重新使用由js可转换(通过简单的计数)生成的html,然后在jQuery中追加项目,但这似乎是一个非常棘手的解决方案,同时缺乏自定义选项.这种方法的优点包括以下事实：在某些时候,我想在web-ui中包含过滤/自定义列.
我在找什么？给定一个具有多个属性[Columngroup1,Columngroup2]和[Rowgroup 1,rowgroup2,rowgroup3]的JSON数组的JSON数组,我想根据以下内容进行布局(内置于Tableau)：
在上面的示例中,[Businessline,Type,Product]是行组,[Active_or_roadmap,Roadmap Quarter]是列组.数据集的粒度更深一层,每个“产品”可以由多个子产品组成,这些子产品应放置在“活动”列(期间标题)或路线图季度列之一中.子产品15.03和15.01在视觉上分组在相同的“行”中可以看出.
我面临什么困难？
>我是否使用HTML表,应该使用带有表示行/列的类的div或两者的组合？增加了复杂性：在某些时候,我想让非标题列水平“滚动”(如果太宽).
>在某些情况下,我想过滤出一些行,我应该重新生成整个表,或者(误)使用可见性：隐藏？在后一种情况下：我将如何处理部分过滤的产品组(即副产品15.01不可见,子产品15.03确实需要显示)
>如何在DOM元素中嵌入对象详细信息？即在悬停/ clickevent的情况下,我将如何知道JSON对象中哪一行对应于被点击的名称？
请注意,我不一定正在寻找一个完全符合我上面所说的答案,我主要是寻找一个方向w.r.t.代码从JSON到上表以结构体面和灵活的方式.
非常感谢任何帮助,我有一个codepen包含一些样本数据和一个相当差的尝试.
function load_data(callback){
$.getJSON('https://s3-us-west-2.amazonaws.com/s.cdpn.io/997352/data_portfolioroadmap.json',function(data){
callback(data)
});
}
解决方法
{[
{productTitle:"Product 01.01",state:"Active","quarter":"2017Q1"},{productTitle:"Product 01.02",state:"Roadmap","quarter":"none"}
]}
有了这个,你应该能够遍历数组并放置每个元素.我会使用自定义div.首先循环过来,建立这些.循环在状态和过滤器抓住你需要的.将过滤后的结果放入一个新的var并排序.当您正在构建行时,每个项目在正确的列位置的位置.然后重复下一个状态.
希望这是有道理的.