热图图¶
热图¶
{% embed data=“{“url”:”https://stackblitz.com/edit/swimlane-heat-map-chart?embed=1&file=app/app.component.ts”,”type”:”link”,”title”:”heat-map-chart - StackBlitz”,”description”:”Heat Map Chart demo for ngx-charts”,”icon”:{“type”:”icon”,”url”:”https://c.staticblitz.com/assets/icon-664493542621427cc8adae5e8f50d632f87aaa6ea1ce5b01e9a3d05b57940a9f.png”,”aspectRatio”:0},”thumbnail”:{“type”:”thumbnail”,”url”:”https://c.staticblitz.com/assets/icon-664493542621427cc8adae5e8f50d632f87aaa6ea1ce5b01e9a3d05b57940a9f.png”,”aspectRatio”:0}}” %}
输入¶
属性 |
类型 |
默认值 |
描述 |
---|---|---|---|
view |
number[] |
图表[宽度,高度]的尺寸。如果未定义,图表将适合于父容器的大小 |
|
results |
object[] |
图表数据 |
|
scheme |
object |
图表的颜色方案 |
|
animations |
boolean |
true |
使动画 |
legen d |
boolean |
false |
显示或隐藏图例 |
legendTitle |
string |
‘Legend’ |
图例标题 |
legen dPosi tion |
string |
‘right’ |
图例位置 [‘right’, ‘below’] |
xAxis |
boolean |
false |
显示或隐藏x轴 |
yAxis |
boolean |
false |
显示或隐藏y轴 |
showX AxisL abel |
boolean |
false |
显示或隐藏x轴标签 |
showY AxisL abel |
boolean |
false |
显示或隐藏y轴标签 |
xAxis Label |
string |
X轴标签文本 |
|
yAxis Label |
string |
y轴标签文本 |
|
trimX AxisT icks |
boolean |
tru e |
修剪或不在x轴上蜱 |
trimY AxisT icks |
boolean |
tru e |
修剪或不蜱在Y轴上 |
rotat eXAxi sTick s |
boolean |
tru e |
enable automic rotation of x-axis ticks to prevent overlaps |
maxXA xisTi ckLen gth |
number |
16 |
蜱的最大长度。如果 |
maxYA xisTi ckLen gth |
number |
16 |
蜱的最大长度。如果 |
xAxis TickF ormat ting |
function |
x轴刻度格式 |
|
yAxis TickF ormat ting |
function |
y轴刻度格式 |
|
xAxis Ticks |
any[] |
x轴刻度值的预定义的列表 |
|
yAxis Ticks |
any[] |
Y的预定义列表轴的刻度值 |
|
gradi ent |
boolean |
false |
具有梯度,而不是纯色填充元件 |
innerPadding |
number or number[] |
8 |
在像素内填充 |
toolt ipDis abled |
boolean |
false |
显示或隐藏工具提示 |
tooltipText |
function |
(see source ) |
HTML文本在显示工具提示 |
toolt ipTem plate |
TemplateRef |
工具提示中要显示的自定义 ng-template |
输出¶
属性 |
描述 |
---|---|
select |
单击事件 |
数据格式¶
数据格式是多系列:
[
{
"name": "Germany",
"series": [
{
"name": "2010",
"value": 7300000
},
{
"name": "2011",
"value": 8940000
}
]
},
{
"name": "USA",
"series": [
{
"name": "2010",
"value": 7870000
},
{
"name": "2011",
"value": 8270000
}
]
}
]