Fatal编程技术网
  • javascript/
  • Javascript 我所在单位的时间表

Javascript 我所在单位的时间表

javascript highcharts

Javascript 我所在单位的时间表,javascript,highcharts,Javascript,Highcharts,我正在尝试为我的单位创建一个活动日程表。士兵A可能有5个事件，士兵B可能有7个，等等。所有这些都来自excel中的一个表。我将表中的数据转储到cvs并从中提取。我看到了一些例子，我把下面的代码拼凑在一起。我正试图把那个士兵的所有日期放在一行。 代码： $.get('data.csv', function (data) { // Split the lines var lines = data.split('\n'); // Iterate over the lines

我正在尝试为我的单位创建一个活动日程表。士兵A可能有5个事件，士兵B可能有7个，等等。所有这些都来自excel中的一个表。我将表中的数据转储到cvs并从中提取。我看到了一些例子，我把下面的代码拼凑在一起。我正试图把那个士兵的所有日期放在一行。

代码：

$.get('data.csv', function (data) {
    // Split the lines
    var lines = data.split('\n');

    // Iterate over the lines and add categories or series
    $.each(lines, function (lineNo, line) {
        var items = line.split(',');

        // header line containes categories
        $.each(items, function (itemNo, item) {
            if (itemNo === 0) options.xAxis.categories.push(item);
        });

        var series = {
            data: []
        };

        $.each(items, function (itemNo, item) {
            if (itemNo === 0) series.name = item;
        });

        $.each(items, function (itemNo, item) {
            if (itemNo > 0) series.data.push(parseFloat(item));
        });

        options.series.push(series);

    });

    // Create the chart
    var chart = new Highcharts.Chart(options);
});
data.cvs

Soldier_A,2/28/2014,3/3/2014,1/10/2014,1/12/2014,4/4/2014,4/7/2014,1/24/2014,2/6/2014,2/8/2014,2/9/2014,3/7/2014,3/9/2014,6/18/2014,6/27/2014,5/2/2014,5/4/2014,6/21/2014,6/22/2014,7/9/2014,7/9/2014,7/12/2014,8/1/2014,8/2/2014,8/3/2014,9/6/2014,9/10/2014,9/20/2014,9/21/2014,11/1/2013,11/5/2013,11/7/2013,11/10/2013,12/7/2013,12/14/2013
Soldier_B,1/10/2014,1/12/2014,1/13/2014,1/17/2014,1/27/2014,1/31/2014,2/6/2014,2/9/2014,2/10/2014,2/14/2014,2/21/2014,2/23/2014,2/27/2014,3/2/2014,3/7/2014,3/9/2014,3/11/2014,3/11/2014,3/14/2014,3/16/2014,4/1/2014,4/6/2014,4/8/2014,4/8/2014,4/29/2014,5/4/2014,5/13/2014,5/13/2014,6/16/2014,6/22/2014,7/8/2014,7/8/2014,7/14/2014,7/21/2014,8/12/2014,8/12/2014,9/12/2014,9/12/2014,9/6/2014,9/7/2014,1/14/2013,1/14/2013,10/6/2013,10/6/2013,10/7/2013,10/7/2013,10/8/2013,10/8/2013,11/1/2013,11/6/2013,11/15/2013,11/17/2013,12/6/2013,12/8/2013,12/10/2013,12/10/2013
Soldier_C,10/9/2013,10/15/2013,10/22/2013,10/26/2013,11/3/2013,11/5/2013,11/13/2013,11/19/2013,12/6/2013,12/8/2013,12/15/2013,12/20/2013
Soldier_D,10/3/2013,10/7/2013,10/31/2013,11/6/2013
Soldier_E,10/3/2013,10/7/2013,10/24/2013,10/28/2013,10/31/2013,11/6/2013,11/14/2013,11/18/2013,12/5/2013,12/9/2013
Soldier_F,10/6/2013,10/7/2013,10/8/2013,10/8/2013
Soldier_G,10/3/2013,10/7/2013,10/17/2013,10/21/2013,10/31/2013,11/6/2013,11/14/2013,11/18/2013,12/9/2013,12/13/2013
Soldier_H,1/3/2013,1/6/2013,1/3/2013,1/6/2013,1/3/2013,1/6/2013,1/10/2013,1/13/2013,1/10/2013,1/13/2013,1/10/2013,1/13/2013,1/23/2013,1/27/2013,1/23/2013,1/27/2013,1/30/2013,2/2/2013,1/30/2013,2/2/2013,2/6/2013,2/9/2013,2/20/2013,2/24/2013,2/27/2013,3/3/2013,2/27/2013,3/3/2013,3/13/2013,3/17/2013,3/13/2013,3/17/2013,4/10/2013,4/14/2013,5/15/2013,5/19/2013,8/2/2013,8/22/2013,10/3/2013,10/7/2013,10/3/2013,10/7/2013,10/17/2013,10/20/2013,10/24/2013,10/28/2013,11/1/2013,11/4/2013,11/14/2013,11/18/2013,11/14/2013,11/18/2013,11/14/2013,11/18/2013,11/22/2013,11/25/2013,12/5/2013,12/8/2013,12/5/2013,12/8/2013,12/5/2013,12/9/2013,12/5/2013,12/9/2013,12/10/2013,12/13/2013
Soldier_I,10/3/2013,10/7/2013,10/31/2013,11/4/2013,11/14/2013,11/18/2013,12/5/2013,12/9/2013
Soldier_J,1/4/2013,1/5/2013,1/9/2013,1/13/2013,1/21/2013,1/21/2013,1/23/2013,1/23/2013,2/5/2013,2/10/2013,2/6/2013,2/10/2013,2/8/2013,2/9/2013,2/18/2013,2/18/2013,2/20/2013,2/20/2013,2/28/2013,3/2/2013,2/28/2013,3/2/2013,3/18/2013,3/18/2013,3/20/2013,3/20/2013,4/2/2013,4/6/2013,4/11/2013,4/13/2013,4/22/2013,4/22/2013,4/22/2013,4/28/2013,4/24/2013,4/24/2013,5/1/2013,5/5/2013,5/2/2013,5/4/2013,5/20/2013,5/20/2013,5/22/2013,5/22/2013,6/4/2014,6/13/2014,6/4/2014,6/13/2014,6/14/2014,6/19/2014,6/14/2014,6/19/2014,7/8/2013,7/14/2013,7/14/2013,7/19/2013,7/14/2013,7/21/2013,7/22/2013,7/22/2013,7/24/2013,7/24/2013,8/1/2013,8/10/2013,8/19/2013,8/19/2013,8/21/2013,8/21/2013,9/23/2013,9/23/2013,9/24/2013,9/24/2013,10/5/2013,10/6/2013,10/16/2013,10/21/2013,10/22/2013,10/22/2013,10/24/2013,10/24/2013,10/30/2013,11/4/2013,11/19/2013,11/19/2013,11/21/2013,11/21/2013,12/17/2013,12/17/2013,12/19/2013,12/19/2013
Soldier_K,1/14/2013,1/14/2013,1/10/2014,1/12/2014,1/13/2014,1/17/2014,1/27/2014,1/31/2014,2/6/2014,2/9/2014,2/10/2014,2/14/2014,2/21/2014,2/23/2014,2/27/2014,3/2/2014,3/7/2014,3/9/2014,3/11/2014,3/11/2014,3/14/2014,3/16/2014,4/1/2014,4/6/2014,4/8/2014,4/8/2014,4/29/2014,5/4/2014,5/13/2014,5/13/2014,6/16/2014,6/22/2014,7/8/2014,7/8/2014,7/14/2014,7/21/2014,8/12/2014,8/12/2014,9/12/2014,9/12/2014,9/6/2014,9/7/2014,11/2/2013,11/3/2013,11/4/2013,11/6/2013,12/6/2013,12/8/2013,12/10/2013,12/10/2013
Soldier_L,10/3/2013,10/7/2013,10/17/2013,10/21/2013,10/30/2013,11/4/2013,11/14/2013,11/18/2013
Soldier_M,7/14/2013,7/21/2013,1/3/2014,1/5/2014,1/10/2014,1/12/2014,2/7/2014,2/9/2014,3/6/2014,3/9/2014,4/3/2014,4/6/2014,4/11/2014,4/13/2014,5/9/2014,5/11/2014,6/7/2014,6/15/2014,10/4/2013,10/6/2013,10/4/2013,10/6/2013,10/18/2013,10/20/2013,11/1/2013,11/3/2013,11/14/2013,11/17/2013,12/6/2013,12/8/2013
Soldier_N,10/3/2013,10/7/2013,10/31/2013,11/7/2013,12/9/2013,12/13/2013
Soldier_O,10/3/2013,10/7/2013,10/17/2013,10/21/2013,10/31/2013,11/4/2013,11/21/2013,11/25/2013,12/5/2013,12/9/2013
Soldier_P,10/3/2013,10/7/2013,10/17/2013,10/21/2013,10/31/2013,11/4/2013,11/14/2013,11/18/2013,12/5/2013,12/9/2013
Soldier_Q,7/14/2013,7/21/2013,10/3/2013,10/6/2013,1/3/2014,1/5/2014,1/10/2014,1/12/2014,2/7/2014,2/9/2014,3/6/2014,3/9/2014,4/3/2014,4/6/2014,4/11/2014,4/13/2014,5/9/2014,5/11/2014,6/7/2014,6/15/2014,10/4/2013,10/6/2013,10/18/2013,10/20/2013,11/1/2013,11/3/2013,11/14/2013,11/17/2013,12/6/2013,12/8/2013
Soldier_R,10/9/2013,10/14/2013,10/31/2013,11/6/2013,11/14/2013,11/18/2013
Soldier_S,1/4/2013,1/5/2013,1/6/2013,1/6/2013,1/15/2013,1/15/2013,1/17/2013,1/17/2013,1/23/2013,1/23/2013,1/27/2013,1/27/2013,2/3/2013,2/3/2013,2/7/2013,2/7/2013,2/10/2013,2/11/2013,2/18/2013,2/18/2013,2/26/2013,2/26/2013,3/4/2013,3/7/2013,3/8/2013,3/9/2013,3/11/2013,3/11/2013,3/18/2013,3/18/2013,3/26/2013,3/26/2013,4/12/2013,4/13/2013,4/22/2013,4/22/2013,5/3/2013,5/4/2013,5/20/2013,5/20/2013,7/4/2013,7/7/2013,7/8/2013,7/16/2013,9/6/2013,9/7/2013,10/2/2013,10/2/2013,10/4/2013,10/6/2013,6/7/2014,6/8/2014,10/10/2013,10/10/2013,10/14/2013,10/14/2013,10/16/2013,10/16/2013,10/17/2013,10/17/2013,10/28/2013,10/28/2013,6/9/2014,6/14/2014,6/18/2014,6/18/2014,8/5/2014,8/11/2014,11/2/2013,11/3/2013,11/4/2013,11/4/2013,11/12/2013,11/12/2013,11/14/2013,11/14/2013,11/14/2013,11/14/2013,11/18/2013,11/18/2013,11/21/2013,11/21/2013,11/27/2013,11/27/2013,12/2/2013,12/2/2013,12/7/2013,12/8/2013,12/9/2013,12/9/2013,12/18/2013,12/18/2013
Soldier_T,10/7/2013,10/11/2013,10/14/2013,10/17/2013,10/20/2013,10/25/2013,3/7/2014,3/10/2014,1/10/2014,1/12/2014,1/24/2014,2/5/2014,2/6/2014,2/8/2014,5/2/2014,5/5/2014,3/17/2014,3/20/2014,4/3/2014,4/6/2014,6/21/2014,6/27/2014,6/21/2014,6/22/2014,7/9/2014,7/11/2014,7/12/2014,8/1/2014,8/2/2014,8/3/2014,9/20/2014,9/21/2014,9/6/2014,9/10/2014,11/1/2013,11/5/2013,11/18/2013,11/21/2013,12/6/2013,12/8/2013,12/8/2013,12/14/2013
Soldier_U,1/10/2013,1/13/2013,1/10/2013,1/13/2013,1/10/2013,1/13/2013,1/23/2013,1/27/2013,1/23/2013,1/27/2013,1/30/2013,2/2/2013,1/30/2013,2/2/2013,2/6/2013,2/9/2013,2/20/2013,2/24/2013,2/27/2013,3/3/2013,2/27/2013,3/3/2013,3/13/2013,3/17/2013,3/13/2013,3/17/2013,4/10/2013,4/14/2013,5/15/2013,5/19/2013,8/2/2013,8/22/2013,10/3/2013,10/7/2013,10/3/2013,10/7/2013,10/17/2013,10/20/2013,10/24/2013,10/28/2013,11/1/2013,11/4/2013,11/14/2013,11/18/2013,11/14/2013,11/18/2013,11/14/2013,11/18/2013,6/6/2014,6/8/2014,6/6/2014,6/8/2014,6/9/2014,6/28/2014,6/9/2014,6/28/2014,11/22/2013,11/25/2013,12/5/2013,12/8/2013,12/5/2013,12/8/2013,12/5/2013,12/9/2013,12/5/2013,12/9/2013,12/10/2013,12/13/2013
Soldier_V,10/3/2013,10/7/2013,10/31/2013,11/4/2013,11/14/2013,11/18/2013
Soldier_W,10/31/2013,11/5/2013,11/21/2013,11/25/2013
Soldier_X,10/3/2013,10/7/2013,10/31/2013,11/4/2013,11/14/2013,11/18/2013
Soldier_Y,1/4/2013,1/5/2013,1/9/2013,1/13/2013,1/21/2013,1/21/2013,1/23/2013,1/23/2013,2/5/2013,2/10/2013,2/6/2013,2/10/2013,2/8/2013,2/9/2013,2/18/2013,2/18/2013,2/20/2013,2/20/2013,2/28/2013,3/2/2013,2/28/2013,3/2/2013,3/18/2013,3/18/2013,3/20/2013,3/20/2013,4/2/2013,4/6/2013,4/11/2013,4/13/2013,4/22/2013,4/22/2013,4/22/2013,4/28/2013,4/24/2013,4/24/2013,5/1/2013,5/5/2013,5/2/2013,5/4/2013,5/20/2013,5/20/2013,5/22/2013,5/22/2013,7/8/2013,7/14/2013,7/14/2013,7/19/2013,7/14/2013,7/21/2013,7/22/2013,7/22/2013,7/24/2013,7/24/2013,8/1/2013,8/10/2013,8/19/2013,8/19/2013,8/21/2013,8/21/2013,9/23/2013,9/23/2013,9/24/2013,9/24/2013,10/5/2013,10/6/2013,10/16/2013,10/21/2013,10/22/2013,10/22/2013,10/24/2013,10/24/2013,10/30/2013,11/4/2013,11/19/2013,11/19/2013,11/21/2013,11/21/2013,6/4/2014,6/13/2014,6/4/2014,6/13/2014,6/14/2014,6/19/2014,6/14/2014,6/19/2014,12/17/2013,12/17/2013,12/19/2013,12/19/2013
首先，您可以通过以下操作将每个日期解析为时间戳：


var ts=（新日期（项目））.getTime（）；

这将获得Highcharts使用的javascript时间戳

接下来，您可能需要禁用勾号间隔部分，因为在日期时间图上，勾号间隔部分经常出错。

我认为，首先，您需要说明此图表的外观。据我所知，您需要将每个士兵作为一个系列（显示在图例中）。但是xAxis上应该是什么，yAxis上应该是什么？我想你是想让亚克西斯秀知道日期。见示例：

简化代码：

$.each(lines, function (lineNo, line) {
  var items = line.split(',');
  var series = {
      threshold: Date.UTC(2013,8,30), //use it to start from different value than year 1970
      data: []
  };
  $.each(items, function (itemNo, item) {
      if (itemNo === 0) {
          series.name = item;
      } else {
          series.data.push((new Date(item)).getTime());
      }
  });
  options.series.push(series);
就我个人而言，我会使用散点序列来绘制这样的图表：

你有没有关于如何使用散点序列的示例？底轴是日期（天），边轴是士兵姓名。然后在图表中显示该士兵的所有日期。与此类似：我已经搞乱了从cvs获取数据来填充，而不是硬编码数据。但到目前为止运气不好。谢谢你看这个！谢谢你讲清楚。但是，您的数据不会创建这样的图表。每个士兵都有一些日期，而甘特图要求每个（起始日期和截止日期）栏有两个日期。我建议在这种情况下使用columnrange系列。谢谢。我应该如何组织数据以使其更有意义？每一行都有一个士兵的名字和日期。每个日期都是开始日期或结束日期。因此，如果该行有4个日期，则为两个事件。我当然可以根据需要组织数据。也谢谢你的帮助，真的很感谢。如果你总是为士兵准备偶数个日期，而你现在第一个是开始日期，第二个是结束日期，你可以用这种方式简单地预处理数据，看看：我的看起来和你的不一样……但我使用的是类似的数据？我能吃多少有限制吗？无论如何，你比任何人都更接近我，我真的很感激。