我尝试使用此代码自定义NGX-Charts-Heat-Map的工具提示
<ng-template #tooltipTemplate let-item="item">
<h1>
{{getFlag(item.name)}}
</h1>
<h2>{{item.name}}: {{item.value}}</h2>
</ng-template>
我意识到,如果数据是单个对象阵列,但不是多对象
export var single = [
{
"name": "Germany",
"value": 8940000
},
{
"name": "USA",
"value": 5000000
},
{
"name": "France",
"value": 7200000
}
];
export var multi = [
{
"name": "Germany",
"series": [
{
"name": "2010",
"value": 7300000
},
{
"name": "2011",
"value": 8940000
}
]
},
{
"name": "USA",
"series": [
{
"name": "2010",
"value": 7870000
},
{
"name": "2011",
"value": 8270000
}
]
},
{
"name": "France",
"series": [
{
"name": "2010",
"value": 5000002
},
{
"name": "2011",
"value": 5800000
}
]
}
];
NGX-Charts-Heat-Map仅允许多对象,是否有任何方法可以自定义工具提示?传奇也可能
在<ngx-charts-bar-vertical-2d>
(或类似)图表元素中使用以下形式的模板:
<ng-template #tooltipTemplate let-model="model">
<!-- fields are series/name/value -->
<div class="tt">
{{ model.series }}
| {{ model.name }}
| {{ model.value }}
</div>
</ng-template>
stackblitz示例基于当前文档分配的示例:https://stackblitz.com/edit/vertical-bar-chart-kfjrxe