Визуализировать Jira Agile Burndown в chartist.js?

Проблема

Я использую данные json из jira для отображения диаграммы выгорания проекта. По причинам, которые я не буду раскрывать, я не могу использовать встроенные диаграммы Jira Agile. Я использую chartist.js для рендеринга выгорания, но у меня возникают проблемы, и я был бы признателен за вклад пользователя chartist.js.

Я прикрепил изображение диаграммы, которую хочу создать в качестве справки.

Проблема

  1. События Burndown происходят более одного раза в течение дня. У каждого свое время, когда это произошло. Я не хочу показывать конкретное время каждого события в группе меток оси X. Есть ли способ сгруппировать события для данного дня в определенный день, но показать, что они не произошли все одновременно?
  2. Я хочу создать руководство по выгоранию (см. серую линию на прикрепленном изображении). Есть ли простой способ, чтобы линия начиналась сверху и заканчивалась внизу в течение заданного времени?

В стороне

Мне нравится использовать chartist.js, но я не женат на нем для своего проекта, я могу использовать любую библиотеку диаграмм, которую захочу. Я с радостью приму предложения по поводу другой библиотеки для создания диаграмм, которая делает то, что мне нужно.

Диаграмма выгорания в том виде, в каком она отображается в Jira. Мне нужно продублировать ее самостоятельно


javascript jira-agile chartist.js greenhopper
person John Gordon    schedule 15.06.2015    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Хотя 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
    }
  }
});
person gkunz    schedule 26.06.2015