我在页面上有多个图表，其中之一是 HeatMap。 我正在使用 chartjs创建我的图表。我无法使用 chartjs 创建热图。也有可能用 chartJS 看起来像 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
}
}]
}
}
});
关于javascript - 使用 Chart.js 创建热图/穿孔卡片，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41393590/