javascript - 使用 Chart.js 创建热图/穿孔卡片

Question

我在页面上有多个图表，其中之一是 HeatMap。我正在使用 chartjs创建我的图表。我无法使用 chartjs 创建热图。也有可能用 chartJS 看起来像 github punchcard

punchcard example

Answer 1

使用气泡图绘制图表。下面是相同的图像。

[示例代码]

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