javascript - 在 chartist.js 中渲染 Jira Agile Burndown？

Question

问题

我正在使用来自 jira 的 json 数据来呈现项目的燃尽图。由于我不会深入探讨的原因，我无法使用内置的 Jira Agile 图表。我正在使用 chartist.js 来呈现燃尽图，但我遇到了麻烦，非常感谢 chartist.js 用户的输入。

我附上了一张我想生成的图表图片作为引用。

问题

1. 烧毁事件在一天中发生不止一次。每个人都有自己的发生时间。我不想在 x 轴标签组中显示每次发生的具体时间。有没有一种方法可以在特定日期将特定日期的事件“分组”，但表明它们并非同时发生？
2. 我想创建一个燃尽图“指南”(见附图中的灰线)。有没有一种简单的方法可以让一条线在给定时间内从顶部开始并在底部结束？

旁白

我一直很喜欢使用 chartist.js，但我并没有在我的项目中使用它，我可以使用任何我想要的图表库。我很乐意接受关于另一个图表库的建议，它可以满足我的需要。

Answer 1

虽然 Chartist 不直接支持方便的 API 来创建基于时间的图表(这将很快登陆)，但我们添加了动态轴配置，允许您将标准 X 轴类型(基于步长)切换为更复杂的比例轴。

由于日期将被转换为数字并且幕后的数学是相同的，您可以通过一些手动操作轻松创建基于时间的图表。到目前为止，我们还没有基于时间框架的分时生成器，但这将再次与将很快在 Chartist 中创建的 TimeAxis 一起提供。

要获取有关自定义轴配置的更多信息，您可以在此处阅读文档: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
    }
  }
});