Highcharts.chart('container', {
chart: {
type: 'heatmap',
marginTop: 40,
marginBottom: 80,
plotBorderWidth: 1
},
title: {
text: 'Sales per employee per weekday'
},
xAxis: {
categories: ['Alexander', 'Marie', 'Maximilian', 'Sophia', 'Lukas', 'Maria', 'Leon', 'Anna', 'Tim', 'Laura']
},
yAxis: {
categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
title: null
},
colorAxis: {
min: 0,
minColor: '#FFFFFF',
maxColor: Highcharts.getOptions().colors[0]
},
legend: {
align: 'right',
layout: 'vertical',
margin: 0,
verticalAlign: 'top',
Highcharts热力图的JS代码详细分析(一)
最新推荐文章于 2024-09-02 19:40:18 发布
本文深入解析Highcharts热力图的JavaScript实现,重点关注图表容器的绑定方式,如通过构造函数实例化。内容涵盖图表样式属性,如borderWidth、margin、backgroundColor等,并解释了marginTop和marginBottom在CSS盒子模型中的作用。同时,讨论了xAxis、yAxis的数据设置及colorAxis的色彩映射原理。
摘要由CSDN通过智能技术生成