用于甘特图的 JavaScript / jQuery 库

Posted 2023-05-08

【中文标题】用于甘特图的 JavaScript / jQuery 库

【英文标题】：JavaScript / jQuery library for gantt like chart

【发布时间】：2012-07-15 01:24:44

【问题描述】：

我需要创建一个堆叠条形图来显示一天中的引擎状态。这是我想要的示例：

它看起来像一个甘特图，但可能比普通的甘特图简单得多。 我正在寻找支持这种图表的 JavaScript/jQuery 图表库。 我知道很多可用的甘特图库，但想知道哪个库有我想要的图表的选项/设置。

我的数据将采用以下格式：

[
    
        "day": "2009-07-13",
        "work": ["11:16:35-12:03:12", "12:32:48-13:26:28", "13:39:09-13:39:12", "13:41:03-13:41:05", "14:18:09-24:00:00"]
    , 
        "day": "2009-07-14",
        "work": ["00:00:00-07:22:25", "07:22:25-07:22:28", "10:10:04-10:10:31", "10:10:32-10:15:33", "10:18:07-10:21:19", "11:04:49-11:06:15", "11:12:50-11:19:05", "11:19:11-11:19:19", "11:45:50-11:51:42", "11:51:43-11:53:55", "14:03:13-14:13:04", "14:23:55-14:31:28", "14:31:28-14:38:00", "14:38:00-14:49:04", "16:34:56-16:44:33", "16:46:37-16:48:10", "16:48:11-24:00:00"]
    , 
        "day": "2009-07-15",
        "work": ["00:00:00-08:16:23", "09:57:57-10:15:05"]
    , 
        "day": "2009-07-16",
        "work": ["10:02:40-10:05:56", "10:07:16-10:09:26", "10:09:27-10:09:28", "13:18:31-24:00:00"]
    , 
        "day": "2009-07-17",
        "work": ["00:00:00-08:56:41", "16:07:58-16:08:23"]
    , 
        "day": "2009-07-20",
        "work": ["14:44:47-14:48:35", "15:09:14-16:47:06", "16:47:05-16:47:10", "16:47:13-16:47:15", "16:47:16-16:47:20"]
    , 
        "day": "2009-07-21",
        "work": ["10:52:51-16:37:07"]
    , 
        "day": "2009-07-24",
        "work": ["14:54:38-16:03:07", "16:16:23-16:35:14", "16:35:17-16:41:22", "16:43:37-23:56:37"]
    , 
        "day": "2009-07-25",
        "work": ["20:36:34-21:24:28", "21:24:43-23:45:53"]
    , 
        "day": "2009-07-26",
        "work": ["13:46:59-18:09:09"]
    , 
        "day": "2009-07-28",
        "work": ["13:48:30-13:51:10", "13:51:18-13:51:27", "13:52:17-14:57:31"]
    , 
        "day": "2009-07-29",
        "work": ["14:50:15-14:50:16", "15:36:17-15:43:51", "15:53:31-16:29:30", "16:57:50-23:07:28"]
    , 
        "day": "2009-07-30",
        "work": ["11:25:29-11:41:32", "16:06:37-16:33:09", "21:14:04-21:20:18", "21:53:57-22:18:59"]
    
]

work 属性时隙是引擎工作时，work 时隙之间的时隙是引擎关闭时。

寻找这个已经很久了。任何建议将不胜感激！

【问题讨论】：

你试过highcharts或fusioncharts吗？

@poncha，我试过 highcharts，但不支持这种图表，所以创建一个像这样的图表会有点棘手。我不喜欢使用 FusionCharts，因为它只支持免费版本的 Flash。谢谢。

您可以创建没有图例的堆叠条并单独创建图例（如果这是问题）...

@poncha 我不确定我是否明白你的意思。所以你的意思是在这种情况下我需要创建四个类别并让它们中的每两个使用相同的颜色，然后分别创建图例？因此，如果我有超过一天的数据要显示，比如 2012 年 6 月 7 日 和 2012 年 6 月 12 日，仍然可以这样吗？

对于每个日期，您都必须使用相同的多个数据集和迭代颜色，是的......我不明白为什么不

【参考方案1】：

您可以使用javascript InfoVis Toolkit 或制作您自己的自定义渲染器。

也许你可以修改BarChart example，让它在y轴上显示时间。

如果您决定编写自己的控件，那么像 Raphael 这样的库将对您有很大帮助。

不管怎样，它似乎是一个非常简单的控制，因此不需要外部依赖于 Flash、Silverlight 等。

【讨论】：

感谢您对此提供一些见解。我现在正在使用 Highcharts 来做我想做的事，尽管当输入数据变大时它可能不是一个好的选择，因为我正在使用散点图来做到这一点。而Highcharts在大数据方面也不是很擅长。我已经提出了我的问题here，如果有兴趣可以看一下。如您所见，由于从服务器返回数据集，因此可能需要对 JavaScript InfoVis Toolkit 中所需的数据集进行大量数据操作。

我仍然没有使用过 JIT 并且不确定它是否需要日期时间数据。

【参考方案2】：

你可以试试Flot，它有一个好看的Gantt chart plugin。

示例数据：

var d1 = [
    [Date.UTC(2010, 0, 1, 11, 23), 5, Date.UTC(2010, 0, 1, 11, 25), "Put Water into Pot"],
    [Date.UTC(2010, 0, 1, 11, 35), 5, Date.UTC(2010, 0, 1, 11, 47), "Clean Cooker"],
    [Date.UTC(2010, 0, 1, 11, 25), 4, Date.UTC(2010, 0, 1, 11, 27), "Put Pot on Cooker"]
]

From plugin specification:

var data = [
    [Date.UTC(2010,0,25,12,45),1,Date.UTC(2010,0,25,13,15],"Name of Step"]

第一个参数是开始步骤。 其次是资源数量。 第三步是结束。 第四个描述步骤的名称（用于工具提示）。

【讨论】：

其数据插件的格式是什么？我调查了几分钟，但无法弄清楚。谢谢。

我自己没有使用过甘特图（虽然我已经使用 Flot 很长时间了），但是从甘特示例的源代码中，我在答案中添加了示例数据。跨度>

【参考方案3】：

我正在为 jqplot 开发时间线功能。 http://www.jqplot.com/

我有一个 JsFiddle，这里有一个示例：http://jsfiddle.net/NVbjv/8/

它仍在进行中，我需要弄清楚一些事情。如果您想了解更多信息，请查看我在 *** 上的一些问题。我希望能够在某种插件中发展它。 (display pointlabel in highlighter jqplot,jqplot text labels on y-axis)