javascript - Highcharts - 组织原始数据

标签 javascript highcharts

我正在查看 highcharts 的所有演示,它们似乎都遵循一个非常简单的数据结构:

Categories,Apples,Pears,Oranges,Bananas
John,8,4,6,5
Jane,3,4,2,3
Joe,86,76,79,77
Janet,3,16,13,15

我的数据不太适合这个组织。我当然可以这样做,但设置起来会很痛苦,而且无法更新。

我希望构建堆叠条形图来显示类别(例如第 1 组、第 2 组、第 3 组)以及销售人员及其销售额。由于销售人员可能同时属于多个小组,因此问题变得更加复杂;随着时间的推移,可以返回到原来的类别。

因此类别 1(第 1 组)将从如下表中提取数据

Date  |  Date | Group |
Start |  End  | Lead  |

1990  |  1991 |  AAA  |
1991  |  1994 |  BBB  |
1994  |  1996 |  AAA  |

highcharts 的设计细节(John、Jane、Joe)的方式与每个类别相关联。创建上面所示的图表很简单。但是更复杂的东西怎么样,有 4 个类别和 200 多个名称的东西

Category Date Start Date End  TotDays Name
Apples  5/11/1994   3/1/1995    294 sc
Apples  5/19/1995   6/28/1997   771 lb
Apples  12/13/1997  5/12/1998   150 og
Apples  1/30/1999   11/1/1999   275 bs
Apples  11/1/1999   11/27/1999  26  jm
Apples  11/27/1999  4/6/2002    861 ak
Apples  4/6/2002    1/1/2003    270 hs
Apples  5/10/2003   9/13/2003   126 hv
Apples  9/13/2003   6/5/2004    266 fs
Apples  6/5/2004    9/18/2004   105 oh
Apples  9/18/2004   7/16/2005   301 bh
Apples  7/16/2005   9/29/2007   805 jt
Apples  9/29/2007   4/17/2010   931 kp
Apples  4/17/2010   6/1/2010    45  sm
Apples  7/31/2010   8/25/2012   756 dp
Apples  8/25/2012   10/20/2012  56  hn
Apples  10/20/2012  9/14/2014   694 pq
Apples  12/13/2014  2/3/2015    52  al
Bananas 4/29/1995   7/16/2005   3731    bh
Bananas 7/16/2005   10/11/2005  87  jt
Bananas 12/10/2005  7/12/2009   1310    aa
Bananas 9/19/2009   5/7/2011    595 ss
Bananas 5/7/2011    8/17/2013   833 dg
Bananas 8/17/2013   12/7/2013   112 db
Bananas 12/7/2013   2/3/2015    423 fs
Cherries 10/1/1993  8/1/1994    304 dj
Cherries 8/12/1994  12/19/1995  494 jc
Cherries 12/19/1995 6/24/1996   188 st
Cherries 6/24/1996  8/23/1997   425 wj
Cherries 8/23/1997  1/31/1998   161 jg
Cherries 1/31/1998  5/12/2001   1197    wj
Cherries 5/12/2001  9/29/2001   140 ft
Cherries 9/29/2001  7/16/2005   1386    bh
Cherries 11/17/2001 12/13/2003  756 wj
Cherries 5/1/2004   3/11/2006   679 mm
Cherries 7/16/2005  12/14/2006  516 jt
Cherries 3/11/2006  7/15/2006   126 fs
Cherries 7/15/2006  4/28/2007   287 jc
Cherries 4/28/2007  9/1/2012    1953    fs
Cherries 10/14/2010 11/2/2012   750 gg
Cherries 9/1/2012   11/2/2012   62  dg
Cherries 11/2/2012  2/3/2015    823 gg

目前我不知道如何使用 highchart。任何人都可以指出一种使用上面列出的表格的方法吗?

SEE Fiddle 应该是什么样子:

http://jsfiddle.net/MAYO/eLam1Lo1/5/

最佳答案

这个问题与一般数据组织和表示有关,而不是与任何特定于 highcharts 的问题有关。

您需要详细了解数据的不同方面的重要性,以及您想要显示的内容,然后找出哪些显示方法可以满足您的需求。

完成此操作后,就该考虑如何格式化图表库的数据了。但你距离那个点还很远。

(如果您确实找到了一种方法将所有这些放入单个堆叠条形图中,那将非常无用)

需要考虑的事情:

随着时间的推移发生的变化重要吗?还是只是总计?

类别真的很重要吗?如果是这样,并且人们一直在改变类别,那么您需要根据每次组中的人员将数据分成多个 block 。

您真的需要用户级别的数字吗?

很可能,要从这些数据中获得任何有意义的意义,就需要多种可视化类型一起工作。

例如,一个图表按组列出总计,另一个图表列出单个用户。另一个显示每个组的组成随时间的变化,或每个组中每个人的参与情况等。

也许不是您希望得到的答案,但您的问题并不能真正按照所提出的方式回答。

[[更新:

就您发布的示例 fiddle 而言,获取您的数据并将其应用于类似的结果:

http://jsfiddle.net/jlbriggs/up7a5nk5/

选项有很大的发挥空间,但我很难看到它仍然有用......

您的数据基本上是这样的,每个人一个系列,每个代表该人的时间段有一个数据点:

{
  "name":"aa",
  "data":[
    {
      "x":1,
      "low":1134190800000,
      "high":1247371200000
    }
  ]
}

关于javascript - Highcharts - 组织原始数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28304071/

相关文章:

javascript - 如何在不知道 javascript 中的 id/class/tag 的情况下分配给 HTML 元素?

javascript - 有没有一种方法可以强制从父组件重新渲染子组件,而不需要在 React 中更改其 props?

highcharts - 如果日期范围太大,则在 Highcharts 中对日期进行分组

javascript - 如何显示 Bar-Highcharts 库中每个图表的 xAxis 类别?

javascript - 对 Highcharts 中每个 X 轴的系列数据进行排序

javascript - 使用 jQuery 在悬停时向下移动图标

javascript - eBay API findItemsAdvanced() 返回变体列表的重复结果

javascript - 将 HTML 表单输入以 JSON 格式保存到本地文件(如果可能,使用 JavaScript)

javascript - 排行榜。将工具提示置于所有元素之上

jquery - 如何在 Highcharts 中显示 Bar 的剩余百分比?