ヒートマップ/パンチカードを作成するChart.jsを使用する

Question

私は複数のチャートをページに持っています。そのうちの1つはヒートマップです。 私はchartjsを使って自分のチャートを作成しています。 chartjを使ってヒートマップを作成できません。また、それは、グラフを描画するchartJS

punchcard example

Answer 1

使用バブルチャートとのGitHub punchcardのように見える得ることが可能です。以下は同じもののイメージです。

[サンプルコード]

var ctx = document.getElementById("myChart"); 
    var data = { 
     datasets: [ 
      { 
       label : "Monday", 
       data: [ 
        { 
         x: 2, 
         y: 5, 
         r: 12 
        }, 
        { 
         x: 6, 
         y: 5, 
         r: 8 
        }, 
        { 
         x: 10, 
         y: 5, 
         r: 8 
        }, 
        { 
         x: 14, 
         y: 5, 
         r: 6 
        }, 
        { 
         x: 18, 
         y: 5, 
         r: 6 
        }, 
        { 
         x: 22, 
         y: 5, 
         r: 2 
        }, 
        { 
         x: 26, 
         y: 5, 
         r: 2 
        }, 
        { 
         x: 30, 
         y: 5, 
         r: 6 
        }, 
        { 
         x: 34, 
         y: 5, 
         r: 8 
        }, 
        { 
         x: 38, 
         y: 5, 
         r: 12 
        }, 
        { 
         x: 42, 
         y: 5, 
         r: 12 
        }, 
        { 
         x: 46, 
         y: 5, 
         r: 10 
        }, 
        { 
         x: 50, 
         y: 5, 
         r: 12 
        }, 
        { 
         x: 54, 
         y: 5, 
         r: 8 
        }, 
        { 
         x: 58, 
         y: 5, 
         r: 8 
        } 

       ], 
       backgroundColor:"#444", 
       hoverBackgroundColor: "#FF6384", 
      }, 
      { 
       label : "Tuesday", 
       data: [ 
        { 
         x: 2, 
         y: 15, 
         r: 12 
        }, 
        { 
         x: 6, 
         y: 15, 
         r: 8 
        }, 
        { 
         x: 10, 
         y: 15, 
         r: 8 
        }, 
        { 
         x: 14, 
         y: 15, 
         r: 6 
        }, 
        { 
         x: 18, 
         y: 15, 
         r: 6 
        }, 
        { 
         x: 22, 
         y: 15, 
         r: 2 
        }, 
        { 
         x: 26, 
         y: 15, 
         r: 2 
        }, 
        { 
         x: 30, 
         y: 15, 
         r: 6 
        }, 
        { 
         x: 34, 
         y: 15, 
         r: 8 
        }, 
        { 
         x: 38, 
         y: 15, 
         r: 12 
        }, 
        { 
         x: 42, 
         y: 15, 
         r: 12 
        }, 
        { 
         x: 46, 
         y: 15, 
         r: 10 
        }, 
        { 
         x: 50, 
         y: 15, 
         r: 12 
        }, 
        { 
         x: 54, 
         y: 15, 
         r: 8 
        }, 
        { 
         x: 58, 
         y: 15, 
         r: 8 
        } 

       ], 
       backgroundColor:"#444", 

      }, 
      { 
       label : "Wednesday", 
       data: [ 
        { 
         x: 2, 
         y: 25, 
         r: 12 
        }, 
        { 
         x: 6, 
         y: 25, 
         r: 4 
        }, 
        { 
         x: 10, 
         y: 25, 
         r: 4 
        }, 
        { 
         x: 14, 
         y: 25, 
         r: 2 
        }, 
        { 
         x: 18, 
         y: 25, 
         r: 6 
        }, 
        { 
         x: 22, 
         y: 25, 
         r: 12 
        }, 
        { 
         x: 26, 
         y: 25, 
         r: 12 
        }, 
        { 
         x: 30, 
         y: 25, 
         r: 6 
        }, 
        { 
         x: 34, 
         y: 25, 
         r: 8 
        }, 
        { 
         x: 38, 
         y: 25, 
         r: 12 
        }, 
        { 
         x: 42, 
         y: 25, 
         r: 12 
        }, 
        { 
         x: 46, 
         y: 25, 
         r: 10 
        }, 
        { 
         x: 50, 
         y: 25, 
         r: 12 
        }, 
        { 
         x: 54, 
         y: 25, 
         r: 8 
        }, 
        { 
         x: 58, 
         y: 25, 
         r: 8 
        } 

       ], 
       backgroundColor:"#444", 

      } 
     ] 
    }; 
    var myBubbleChart = new Chart(ctx,{ 
     type: 'bubble', 
     data: data, 
     options: { 
      scales : { 
       xAxes : [{ 
        display : false, 
        ticks : { 
         beginAtZero : true, 
         max : 70 
        } 
       }], 
       yAxes : [{ 

        ticks: { 
         beginAtZero : true, 
         max : 40, 
         stepSize : 10 
        } 
       }] 
      } 
     } 
    });