как сделать 52-недельные гистограммы участия, как это сделал Github? - PullRequest
Новая
       18

как сделать 52-недельные гистограммы участия, как это сделал Github?

6 голосов
/ 28 февраля 2012

Я пытаюсь сделать гистограммы похожими на то, как это делает Github для отображения количества коммитов или количества людей, которые смотрят репозитории, например, https://github.com/popular/watched.

Кто-нибудь знает, какую библиотеку они использовали для его создания?

ОБНОВЛЕНИЕ Я хотел бы повторно открыть этот вопрос, если это возможно. Повторно исследуя это, приведенные ниже решения, хотя и сами по себе потрясающие, кажутся слишком сложными для того, что я ищу.

Я перешел на использование этого замечательного учебника по Nettuts, который рисует одну гистограмму, но у меня возникают проблемы с адаптацией к рисованию нескольких гистограмм. http://net.tutsplus.com/tutorials/javascript-ajax/fun-with-canvas-create-a-jquery-graph-plugin/

Я создал скрипку, в которой вручную добавил код для работы со вторым графом, но я считаю, что мне нужны некоторые циклы for, чтобы эта работа работала для переменного числа графов. Вот эта скрипка: http://jsfiddle.net/trpeters1/zHH76/

может кто-нибудь сможет отредактировать эту скрипку, чтобы решить этот вопрос?

Ответы [ 2 ]

8 голосов
/ 28 февраля 2012

Посмотрите на d3.js .Есть несколько примеров того, как вы можете взять массив в JavaScript и превратить его в такой график.

Вот один (более продвинутый) пример: http://mbostock.github.com/d3/ex/population.html
А вот еще один пример, которыйближе к тому, что вы хотите: http://mbostock.github.com/d3/tutorial/bar-2.html

EDIT

Фактический код, который Git Hub использует для создания графиков, выглядит примерно так: 

GitHub.ParticipationGraph = (function(){
  function b(target){
    this.el = target;
    this.onSuccess = $.proxy(this.onSuccess, this);
    this.canvas = this.el.getContext("2d");
    this.refresh();
  }

  b.prototype.barWidth = 7;

  b.prototype.barMaxHeight = 20;

  b.prototype.getUrl = function(){
    return $(this.el).data("source");
  };

  b.prototype.setData = function(data){
    this.data = data;
    if (data == null || data.all == null || data.owner == null) {
      this.data = null;
    }
    this.scale = this.getScale(this.data);
  };

  b.prototype.getScale = function(data){
    var mx, i;
    if (data == null) return;
    mx = data.all[0];
    for(i = 0; i < data.all.length; i++) {
      if (data.all[i] > mx) {
        mx = data.all[i];
      }
    }
    return mx >= this.barMaxHeight ? (this.barMaxHeight-.1)/mx : 1;
  };

  b.prototype.refresh = function(){
    $.ajax({
      url: this.getUrl(),
      dataType: "json",
      success: this.onSuccess
    });
  };

  b.prototype.onSuccess = function(data){
    this.setData(data);
    this.draw();
  };

  b.prototype.draw = function(){
    if (this.data == null) return;
    this.drawCommits(this.data.all, "#cacaca");
    this.drawCommits(this.data.owner, "#336699");
  };

  b.prototype.drawCommits = function(data, color){
    var i, width, height, x, y;
    for (i = 0; i < data.length; i++) {
      width = this.barWidth;
      height = data[i] * this.scale;
      x = i * (this.barWidth + 1);
      y = this.barMaxHeight - height;
      this.canvas.fillStyle = color;
      this.canvas.fillRect(x, y, width, height);
    }
  };

  return b;
})();

По сути, они вызывают тег data-source, расположенный на холсте, который возвращает некоторый JSON, представляющий количество работы / участия / часов (или любую метрику, которую они вычисляют), а затем они проходят через каждое возвращаемое значение и вызываютthis.canvas.fillRect с предопределенной шириной ((Screensize.width/52) - (paddingLeft + paddingRight)) и возвратом высоты из JSON

0 голосов
/ 28 февраля 2012

Попробуйте Моррис для отображения данных временных рядов.

Также Временной график .

...