在chartist.js中渲染Jira Agile Burndown？

Question

問題

我正在使用jira中的json數據來呈現項目的燃盡圖。 由於我不願討論的原因，我無法使用內置的Jira Agile圖表。 我正在使用chartist.js渲染燃盡圖，但遇到麻煩了，不勝感激chartist.js用戶的輸入。

我已附上要生成的圖表圖像作為參考。

問題

1. 燃盡事件在一天中發生多次。 每個人都有自己發生的時間。 我不想顯示每個發生在x軸標簽組中的特定時間。 有沒有一種方法可以將事件在特定日期的某一天“分組”，但能證明事件並非一次發生？
2. 我想創建一個燃盡的“指南”（請參閱​​所附圖像中的灰線）。 有一種簡單的方法可以使一條線從頂部開始到底部在給定時間內結束嗎？

旁白

我一直很喜歡使用chartist.js，但是對於我的項目，我還不滿意，可以使用我想要的任何圖表庫。 我很樂意接受其他需要我做的圖表庫的建議。

Answer 1

盡管Chartist不直接支持用於創建基於時間的圖表的便捷API（這將很快登陸），但我們添加了動態軸配置，該配置可讓您將標准X軸類型（基於步進）切換為更復雜的比例軸。

由於日期將轉換為數字，並且幕后的數學是相同的，因此您可以通過一些手動工作來輕松創建基於時間的圖表。 到目前為止，我們還沒有基於時間框架的滴答生成器，但是同樣，TimeAxis附帶了它，它將很快在Chartist中創建。

要獲取有關自定義軸配置的更多信息，您可以在此處閱讀文檔： http : //gionkunz.github.io/chartist-js/getting-started.html#switching-axis-type

為了向您和其他人展示實現燃盡圖的難度，我使用Chartist 0.9.1為您創建了一個燃盡圖。 我正在使用moment.js格式化日期。

這是jsbin： http ://jsbin.com/lokozu/edit?html,js,output

var chart = new Chartist.Line('.ct-chart', {
  series: [{
    name: 'remaining',
    data: [
      {x: new Date(143134652600), y: 53},
      {x: new Date(143334652600), y: 40},
      {x: new Date(143354652600), y: 45},
      {x: new Date(143356652600), y: 41},
      {x: new Date(143366652600), y: 40},
      {x: new Date(143368652600), y: 38},
      {x: new Date(143378652600), y: 34},
      {x: new Date(143568652600), y: 32},
      {x: new Date(143569652600), y: 18},
      {x: new Date(143579652600), y: 11}
    ]
  }, {
    name: 'stories',
    data: [
      {x: new Date(143134652600), y: 53},
      {x: new Date(143334652600), y: 30},
      {x: new Date(143384652600), y: 30},
      {x: new Date(143568652600), y: 10}
    ]
  }]
}, {
  axisX: {
    type: Chartist.FixedScaleAxis,
    divisor: 5,
    labelInterpolationFnc: function(value) {
      return moment(value).format('MMM D');
    }
  },
  axisY: {
    onlyInteger: true,
    low: 0
  },
  series: {
    remaining: {
      lineSmooth: Chartist.Interpolation.step(),
      showPoint: false
    },
    stories: {
      lineSmooth: false
    }
  }
});