Delme kartı stili grafik oluşturmak için Highcharts.js aracını kullanma

Question

Github'da sunulan "yumruk kart" stil grafiğini yüksek çizelgelerle çoğaltmak istiyorum. Gerçekten bu bir ile mücadele ediyorum

, burada beni orada almaya başlayan bir jsfiddle bu. Ben x üzerinde y ve zaman günlerimi tercih ederim, ama bunu yapmak için nasıl gitmem gerektiği konusunda bir kayıp yapıyorum.

Herhangi bir yardım için teşekkür ederiz.

TIA!

Answer 1

Ekseni çeviremedim, ancak sizin için bir çok şeyi sıraya dizdim.

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}] 
}] 
}); 

Answer 2

I @mangobug gelen updated the jsFiddle ben sanırım sen

Answer 3

istediğini yapmanın daha yakından yol için size rehberlik etmek şimdi geç kalıyor ama belki bu çözüm aynı durumda diğer insanlara yardımcı olacaktır.

İşte benim çözüm:

$(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) }}, 

     ] 
    }] 

    }); 

}); 

Ve burada demo: http://jsfiddle.net/KmPJE/1/

o sizin için çalışan varsa bana bildirin.