Использование Highcharts.js для создания графа стиля перфокарты - PullRequest
Новая
       0

Использование Highcharts.js для создания графа стиля перфокарты

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

Я бы хотел воспроизвести график стилей "перфокарты", представленный на github, с помощью высоких карт.

GitHub Punch Card Graph

Я действительно борюсь с этим, вот jsfiddle , который начинает приводить меня туда. Я предпочел бы иметь дни на y и время на x, но я не знаю, как мне поступить так.

Любая помощь приветствуется.

ТИА!

Ответы [ 3 ]

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

Я не смог перевернуть ось, но многое для вас разобрал.

HTML: 

<div id="container" style="height: 400px"></div>

JS: 

var chart = new Highcharts.Chart({
chart: {
    renderTo: 'container',
    defaultSeriesType: 'scatter'
},

xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {

},
plotOptions: {
    scatter: {
        marker: {
            radius: 4,
            states: {
                hover: {
                    enabled: true,
                    lineColor: 'rgb(100,100,100)'
                }
            }
        },
        states: {
            hover: {
                marker: {
                    enabled: false
                }
            }
        }
    }
},
series: [{
    data: [{y: 161}, {y: 167}, {y: 165}, {y: 140}, {y: 172}, {y: 163}, {y: 187}, {y: 107}, {y: 147}, {y: 145}, {y: 112}, {y: 199}]
}]
});
5 голосов
/ 02 июля 2013

Полагаю, сейчас уже поздно, но, возможно, это решение поможет другим людям в такой же ситуации.

Вот мое решение: 

$(function () {
  $('#container').highcharts({

    chart: {
      defaultSeriesType: 'scatter'
    },

    title: {
      text: 'Punchcard'
    },

    xAxis: {
      type: "datetime",
        dateTimeLabelFormats: {
        hour: '%I %P'  
      },
      tickInterval: 3600000 * 1
    },

    yAxis: {
      categories: ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'],
    },

    series: [{
      data: [

        {y: 0, x: 3600000 * 1,  marker: { radius: Math.floor(Math.random()*11) }}, 
        {y: 0, x: 3600000 * 2,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 0, x: 3600000 * 3,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 0, x: 3600000 * 4,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 0, x: 3600000 * 5,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 0, x: 3600000 * 6,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 0, x: 3600000 * 7,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 0, x: 3600000 * 8,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 0, x: 3600000 * 9,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 0, x: 3600000 * 10, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 0, x: 3600000 * 11, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 0, x: 3600000 * 12, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 0, x: 3600000 * 13, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 0, x: 3600000 * 14, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 0, x: 3600000 * 15, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 0, x: 3600000 * 16, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 0, x: 3600000 * 17, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 0, x: 3600000 * 18, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 0, x: 3600000 * 19, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 0, x: 3600000 * 20, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 0, x: 3600000 * 21, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 0, x: 3600000 * 22, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 0, x: 3600000 * 23, marker: { radius: Math.floor(Math.random()*11) }},

        {y: 1, x: 3600000 * 1,  marker: { radius: Math.floor(Math.random()*11) }}, 
        {y: 1, x: 3600000 * 2,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 1, x: 3600000 * 3,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 1, x: 3600000 * 4,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 1, x: 3600000 * 5,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 1, x: 3600000 * 6,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 1, x: 3600000 * 7,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 1, x: 3600000 * 8,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 1, x: 3600000 * 9,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 1, x: 3600000 * 10, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 1, x: 3600000 * 11, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 1, x: 3600000 * 12, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 1, x: 3600000 * 13, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 1, x: 3600000 * 14, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 1, x: 3600000 * 15, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 1, x: 3600000 * 16, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 1, x: 3600000 * 17, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 1, x: 3600000 * 18, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 1, x: 3600000 * 19, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 1, x: 3600000 * 20, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 1, x: 3600000 * 21, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 1, x: 3600000 * 22, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 1, x: 3600000 * 23, marker: { radius: Math.floor(Math.random()*11) }},

        {y: 2, x: 3600000 * 1,  marker: { radius: Math.floor(Math.random()*11) }}, 
        {y: 2, x: 3600000 * 2,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 2, x: 3600000 * 3,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 2, x: 3600000 * 4,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 2, x: 3600000 * 5,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 2, x: 3600000 * 6,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 2, x: 3600000 * 7,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 2, x: 3600000 * 8,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 2, x: 3600000 * 9,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 2, x: 3600000 * 10, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 2, x: 3600000 * 11, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 2, x: 3600000 * 12, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 2, x: 3600000 * 13, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 2, x: 3600000 * 14, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 2, x: 3600000 * 15, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 2, x: 3600000 * 16, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 2, x: 3600000 * 17, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 2, x: 3600000 * 18, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 2, x: 3600000 * 19, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 2, x: 3600000 * 20, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 2, x: 3600000 * 21, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 2, x: 3600000 * 22, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 2, x: 3600000 * 23, marker: { radius: Math.floor(Math.random()*11) }},

        {y: 3, x: 3600000 * 1,  marker: { radius: Math.floor(Math.random()*11) }}, 
        {y: 3, x: 3600000 * 2,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 3, x: 3600000 * 3,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 3, x: 3600000 * 4,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 3, x: 3600000 * 5,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 3, x: 3600000 * 6,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 3, x: 3600000 * 7,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 3, x: 3600000 * 8,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 3, x: 3600000 * 9,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 3, x: 3600000 * 10, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 3, x: 3600000 * 11, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 3, x: 3600000 * 12, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 3, x: 3600000 * 13, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 3, x: 3600000 * 14, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 3, x: 3600000 * 15, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 3, x: 3600000 * 16, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 3, x: 3600000 * 17, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 3, x: 3600000 * 18, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 3, x: 3600000 * 19, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 3, x: 3600000 * 20, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 3, x: 3600000 * 21, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 3, x: 3600000 * 22, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 3, x: 3600000 * 23, marker: { radius: Math.floor(Math.random()*11) }},

        {y: 4, x: 3600000 * 1,  marker: { radius: Math.floor(Math.random()*11) }}, 
        {y: 4, x: 3600000 * 2,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 4, x: 3600000 * 3,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 4, x: 3600000 * 4,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 4, x: 3600000 * 5,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 4, x: 3600000 * 6,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 4, x: 3600000 * 7,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 4, x: 3600000 * 8,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 4, x: 3600000 * 9,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 4, x: 3600000 * 10, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 4, x: 3600000 * 11, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 4, x: 3600000 * 12, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 4, x: 3600000 * 13, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 4, x: 3600000 * 14, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 4, x: 3600000 * 15, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 4, x: 3600000 * 16, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 4, x: 3600000 * 17, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 4, x: 3600000 * 18, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 4, x: 3600000 * 19, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 4, x: 3600000 * 20, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 4, x: 3600000 * 21, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 4, x: 3600000 * 22, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 4, x: 3600000 * 23, marker: { radius: Math.floor(Math.random()*11) }},

        {y: 5, x: 3600000 * 1,  marker: { radius: Math.floor(Math.random()*11) }}, 
        {y: 5, x: 3600000 * 2,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 5, x: 3600000 * 3,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 5, x: 3600000 * 4,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 5, x: 3600000 * 5,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 5, x: 3600000 * 6,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 5, x: 3600000 * 7,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 5, x: 3600000 * 8,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 5, x: 3600000 * 9,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 5, x: 3600000 * 10, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 5, x: 3600000 * 11, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 5, x: 3600000 * 12, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 5, x: 3600000 * 13, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 5, x: 3600000 * 14, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 5, x: 3600000 * 15, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 5, x: 3600000 * 16, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 5, x: 3600000 * 17, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 5, x: 3600000 * 18, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 5, x: 3600000 * 19, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 5, x: 3600000 * 20, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 5, x: 3600000 * 21, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 5, x: 3600000 * 22, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 5, x: 3600000 * 23, marker: { radius: Math.floor(Math.random()*11) }},

        {y: 6, x: 3600000 * 1,  marker: { radius: Math.floor(Math.random()*11) }}, 
        {y: 6, x: 3600000 * 2,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 6, x: 3600000 * 3,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 6, x: 3600000 * 4,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 6, x: 3600000 * 5,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 6, x: 3600000 * 6,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 6, x: 3600000 * 7,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 6, x: 3600000 * 8,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 6, x: 3600000 * 9,  marker: { radius: Math.floor(Math.random()*11) }},
        {y: 6, x: 3600000 * 10, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 6, x: 3600000 * 11, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 6, x: 3600000 * 12, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 6, x: 3600000 * 13, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 6, x: 3600000 * 14, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 6, x: 3600000 * 15, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 6, x: 3600000 * 16, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 6, x: 3600000 * 17, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 6, x: 3600000 * 18, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 6, x: 3600000 * 19, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 6, x: 3600000 * 20, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 6, x: 3600000 * 21, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 6, x: 3600000 * 22, marker: { radius: Math.floor(Math.random()*11) }},
        {y: 6, x: 3600000 * 23, marker: { radius: Math.floor(Math.random()*11) }},

      ]
    }]

  });

});

А вот демо: http://jsfiddle.net/KmPJE/1/

Дайте мне знать, если это работает для вас.

2 голосов
/ 14 февраля 2012

I обновил jsFiddle из @mangobug, чтобы помочь вам приблизиться к тому, что вы хотите

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...