在图表中，如果想要展示所有数据的汇总值，可以实现吗
解决方案
VChart中，tooltip存在三种类型：
- 分组Tooltip (group)
- 维度Tooltip (dimension)
- 图元Tooltip (mark)
针对上面提到的汇总数据的展示，适用于分组tooltip和维度tooltip，那就可以通过tooltip.dimension.updateContent来进行自定义的展示
tooltip: {
dimension: {
updateContent: (items) => {
const total = items.reduce((sum, item) => {
return +item.value + sum;
}, 0)
return [
{
...items[0],
key: '总计',
value: total,
hasShape: false,
},
...items
];
}
}
}
代码示例
const spec = {
type: 'bar',
data: [
{
id: 'barData',
values: [
{
State: 'WY',
Age: 'Under 5 Years',
Population: 25635
},
{
State: 'WY',
Age: '5 to 13 Years',
Population: 1890
},
{
State: 'WY',
Age: '14 to 17 Years',
Population: 9314
},
{
State: 'DC',
Age: 'Under 5 Years',
Population: 30352
},
{
State: 'DC',
Age: '5 to 13 Years',
Population: 20439
},
{
State: 'DC',
Age: '14 to 17 Years',
Population: 10225
},
{
State: 'VT',
Age: 'Under 5 Years',
Population: 38253
},
{
State: 'VT',
Age: '5 to 13 Years',
Population: 42538
},
{
State: 'VT',
Age: '14 to 17 Years',
Population: 15757
},
{
State: 'ND',
Age: 'Under 5 Years',
Population: 51896
},
{
State: 'ND',
Age: '5 to 13 Years',
Population: 67358
},
{
State: 'ND',
Age: '14 to 17 Years',
Population: 18794
},
{
State: 'AK',
Age: 'Under 5 Years',
Population: 72083
},
{
State: 'AK',
Age: '5 to 13 Years',
Population: 85640
},
{
State: 'AK',
Age: '14 to 17 Years',
Population: 22153
}
]
}
],
xField: 'State',
yField: 'Population',
seriesField: 'Age',
stack: true,
legends: {
visible: true
},
bar: {
// The state style of bar
state: {
hover: {
stroke: '#000',
lineWidth: 1
}
}
},
tooltip: {
dimension: {
updateContent: (items) => {
const total = items.reduce((sum, item) => {
return +item.value + sum;
}, 0)
return [
{
...items[0],
key: '总计',
value: total,
hasShape: false,
},
...items
];
}
}
}
};
